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‘
}
});
效果如下：
时间： 2024-08-24 10:08:09