导入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]
<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]