原创

Jquery EasyUI中Tooltip提示框使用方法

Tooltip提示框使用$.fn.tooltip.defaults重写默认值对象,当用户将鼠标移动到元素上的时候,将会显示一个消息提示框。提示框的内容可以是页面中任何一个HTML元素或者通过Ajax发送后台请求以获取提示框内容。 

通过html标签创建提示框,给元素添加一个"easyui-tooltip"的类名,无需任何Javascript代码,具体代码如下:

<a href="#" title="欢迎收藏www.yoodb.com网站!!!" class="easyui-tooltip">鼠标悬停到这里</a>

利用Javascript创建提示框,具体代码如下:

<a id="yoodb" href="javascript:void(0)">鼠标点击这里</a>

$('#yoodb').tooltip({
    position: 'right',
    content: '<span style="color:#fff">欢迎收藏www.yoodb.com网站!!!</span>',
    onShow: function(){
$(this).tooltip('tip').css({
    backgroundColor: '#666',
    borderColor: '#666'
    });
}});

参数含义具体如下:

position    消息框位置。可用值有:"left","right","top","bottom",默认值为bottom 

content     消息框内容,默认值为null 

trackMouse  为true时,允许提示框跟着鼠标移动,默认值为false 

deltaX  水平方向提示框的位置,默认值为0 

deltaY  垂直方向提示框的位置,默认值为0 

showEvent   当激发什么事件的时候显示提示框,默认值为mouseenter 

hideEvent   当激发什么事件的时候隐藏提示框,默认值为mouseleave 

showDelay   延时多少秒显示提示框,默认值为200 

hideDelay   延时多少秒隐藏提示框,默认值为100 

~阅读全文~人机检测~

关注下方微信公众号“Java精选”(w_z90110),回复关键词领取资料:如Mysql、Hadoop、Dubbo、Spring Boot等,免费领取视频教程、资料文档和项目源码。

Java精选专注程序员推送一些Java开发知识,包括基础知识、各大流行框架(Mybatis、Spring、Spring Boot等)、大数据技术(Storm、Hadoop、MapReduce、Spark等)、数据库(Mysql、Oracle、NoSQL等)、算法与数据结构、面试专题、面试技巧经验、职业规划以及优质开源项目等。其中一部分由小编总结整理,另一部分来源于网络上优质资源,希望对大家的学习和工作有所帮助。

您可能感兴趣的文章

评论

分享:

支付宝

微信