website:http://qtip2.com/
qTip2 is dual-licensed under the open source MITand GPLv2 licenses. In short:you can use qTip2 in any project, commercial or non-commercial.
supports:
8+
3+
6+
9+
2+, iOS 4+
1.文字提示
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Fancy Validate - qtip</title> <link href="css/jquery.qtip.min.css" rel="stylesheet" /> <script src="js/jquery-1.7.1.min.js"></script> <script src="js/jquery.qtip.min.js"></script> <script> $(function() { // 创建提示 $("#demo2").qtip({ content: "提示信息提示信息" }); </script> <div id="demo2" style="background: black; color: white; width: 80px; height: 80px;"> 鼠标移过来 </div>
效果如下：
2.圆角文字提示
使用了红色字体，带阴影，圆角提示。
$("#demo2").qtip({
content: "提示信息提示信息",
style: {
classes: 'ui-tooltip-red ui-tooltip-shadow ui-tooltip-rounded'
}
});
效果如下：
3.加标题
$("#demo3").qtip({
content: {
text: "提示信息提示信息",
title: "提示标题"
}
});
效果如下：
4. 从链接的title提取提示
内容可以从link的title中提取。
$("#demo6 a[title]").qtip({
position: {
my: 'bottom left',
at: 'top center'
},
style: {
classes: 'ui-tooltip-red ui-tooltip-shadow ui-tooltip-rounded'
}
});
<p id="demo1"> In <a href="http://craigsworks.com/wiki/Quantum_mechanics" title="Wikipedia: Quantum mechanics">quantum mechanics</a>, the <b>Heisenberg uncertainty principle</b> states by precise inequalities that certain pairs of physical properties, such as position and <a href="http://craigsworks.com/wiki/Momentum" title="Wikipedia: Momentum">momentum</a>, cannot be simultaneously known to arbitrarily high precision. That is, the more precisely one property is measured, the less precisely the other can be measured. </p>
效果如下：
5.加入图片的提示
$("#demo1 a[title], #demo1 img[alt]").qtip();
当鼠标移动到图片上面的时候，也会出现提示效果，提示内容为img的title字段。
6.提示信息加入多媒体
$("#demo3").qtip({
content: {
text: '<img class="right" src="http://media2.juggledesign.com/qtip2/images/demos/spottedowl.jpg">',
title: "提示标题"
},
style: {
classes: 'ui-tooltip-red ui-tooltip-shadow ui-tooltip-rounded'
}
});
效果如下：
