首页 > 代码库 > qTip2
qTip2
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‘ } });效果如下：
qTip2
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。