easyui-5、tooltip(提示框)

最新推荐文章于 2020-01-10 16:55:20 发布

转载最新推荐文章于 2020-01-10 16:55:20 发布 · 686 阅读

文章标签：

#zhaoqian.sinaapp.com

jquery easy ui 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用jQuery Tooltip插件创建动态提示框。通过简单的HTML结构结合JavaScript配置，可以实现带有自定义样式的提示信息，并支持通过Ajax获取内容。

使用$.fn.tooltip.defaults可以重写默认值对象

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

Class方法调用

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

JS调用

HTML

1	`<` `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'  
     
      });  
     
      }});