Loading

easyUI tootip组件使用

easyUI tootip组件使用：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="easyui/jquery.min.js"></script>
    <script src="easyui/jquery.easyui.min.js"></script>
    <script src="easyui/locale/easyui-lang-zh_CN.js"></script>
    <script src="js/test006.js"></script>
    <link rel="stylesheet" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" href="easyui/themes/icon.css">
</head>

<body style="margin:20px">
    <a class="easyui-tooltip" herf="#" title="this is title">hover on</a>
    <a href="#" id="box">hover 2 on</a>
    <div id="pox" style="border: 1px solid #ccc;width:200px;height:200px">div hover 2 on</div>
</body>

</html>
$(function(argument) {
    var obj = {
        content: '<strong>this is content</strong>', //tooltip显示的内容，支持html语法
        // position:'top',//toptip显示的位置；
        trackMouse: true, //追踪鼠标位置,如果position是top，跟踪鼠标的时候可能会使位置变成bottom；
        // deltaX: 100, //与鼠标x轴方向的偏移
        // deltaY: 100,
        // showDelay: 1500, //显示的延迟时间
        // hideDelay: 1500,
        // showEvent:'click',//显示tooltip的事件
        // hideEvent:'dblclick',//隐藏tooltip的事件,dblclick-双击隐藏
        onShow: function(e) {
            console.log('onShow');
            console.log($(this).tooltip('options')); //获得options对象
            console.log($(this).tooltip('tip')); //获得tip对象
            console.log($(this).tooltip('arrow')); //获得arrow对象
            $(this).tooltip('hide'); //隐藏
            $(this).tooltip('show'); //显示
            $(this).tooltip('update', 'this is update content'); //更新content内容；
            $(this).tooltip('reposition');
            // $(this).tooltip('destroy'); //销毁tooltip对象
        },
        onHide: function(e) {
            console.log('onHide');
        },
        onUpdate: function(e) {
            console.log('onUpdate');
        },
        onPosition: function(left, top) {
            console.log('onPosition');
            console.log('left:' + left + ";top:" + top);
        },
        onDestroy: function(e) {
            console.log('onDestroy');
        }
    };
    $('#box').tooltip(obj);
    $('#pox').tooltip(obj);
});

 

posted @ 2015-10-07 10:25  stono  阅读(563)  评论(0)  编辑  收藏  举报