原创

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),回复关键字领取资料:如HadoopDubboCAS源码等等,免费领取资料视频和项目。 

涵盖:程序人生、搞笑视频、算法与数据结构、黑客技术与网络安全、前端开发、Java、Python、Redis缓存、Spring源码、各大主流框架、Web开发、大数据技术、Storm、Hadoop、MapReduce、Spark、elasticsearch、单点登录统一认证、分布式框架、集群、安卓开发、iOS开发、C/C++、.NET、Linux、Mysql、Oracle、NoSQL非关系型数据库、运维等。

评论

分享:

支付宝

微信