您的位置:首页 > Web前端 > JQuery

jquery qtip提示插件 简单用法

2016-06-29 13:49 393 查看
导入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();
}
}
});
});
});
效果展示

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: