jquery qtip提示插件简单用法

最新推荐文章于 2017-02-04 14:38:36 发布

原创最新推荐文章于 2017-02-04 14:38:36 发布 · 427 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

JavaScript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用jQuery插件qTip为网页元素创建自定义提示框。通过引入必要的JS和CSS文件，设置HTML结构，并编写jQuery代码来配置提示框样式、位置和显示行为。

导入jquery及qtip的js
<link rel="stylesheet" type="text/css" href="js/jquery.qtip.min.css"/>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.qtip.min.js"></script>
html代码
<div id="myDiv">
<a>qtip</a>
</div>
js代码
$(function (){
$("#myDiv a").each(function(){
$(this).qtip({
content: {
text: "qtip is so good"
},
overwrite: true,
style: {
classes: 'ui-tooltip-navyBlue ui-tooltip-shadow ui-tooltip-rounded'
},
position: {
//target: 'mouse',
at: 'bottom left',
viewport: true,
adjust: { mouse: false },
viewport: $(window)
},
hide: {
delay: 300,
//event: 'mouseleave',
fixed: true,
effect: function() {
$(this).slideUp();
}
}
});
});
});
效果展示

[img]http://dl2.iteye.com/upload/attachment/0118/3170/70963129-1064-347a-a79a-5f703afaef8c.bmp[/img]