EasyUI - Tooltip 提示控件

第一种：

效果：

 

html代码：

• 不需要js代码，显示的是title中的内容。

<div>
    <a href="#" title="This is the tooltip message." class="easyui-tooltip">Hover me 01</a>
</div>

 

 

 

第二种：

效果：

 

html代码：

<div>
    <a id="dd" href="javascript:void(0)" >Hover here 02</a>
</div>

 

JS代码：

• position string 消息框位置。可用值有："left","right","top","bottom" bottom 。
• content string 消息框内容。 
• onShow e 在显示提示框的时候触发。 

$(function () {
    $('#dd').tooltip({
        position: 'right',
        content: '<span style="color:#fff">This is the tooltip message.</span>',
        onShow: function () {
            $(this).tooltip('tip').css({
                backgroundColor: '#666', borderColor: '#666'
            });
        }
    });
})