EasyUI - Tooltip 提示控件

时间:2023-03-09 03:11:03
EasyUI - Tooltip 提示控件

第一种:

效果:

EasyUI - Tooltip 提示控件

html代码:

  • 不需要js代码,显示的是title中的内容。
<div>
<a href="#" title="This is the tooltip message." class="easyui-tooltip">Hover me </a>
</div>

第二种:

效果:

EasyUI - Tooltip 提示控件

html代码:

<div>
<a id="dd" href="javascript:void(0)" >Hover here </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'
});
}
});
})