jQuery EasyUI 互动版

Tooltip

当用户将鼠标移动到元素上的时候,将会显示一个消息提示框。提示框的内容可以是页面中任何一个HTML元素或者通过Ajax发送后台请求以获取提示框内容。

1.通过标签创建提示框,给元素添加一个"easyui-tooltip"的类名,无需任何Javascript代码。

<a href="javascript:void(0)" title="This is the tooltip message." class="easyui-tooltip">Hover me</a>

2.通过Javascript创建提示框。

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

我们通过show与hide方法来实现提示框的显示与隐藏。