码迷,mamicode.com
首页 > 其他好文 > 详细

qTip2

时间:2015-02-02 12:11:14      阅读:239      评论:0      收藏:0      [点我收藏+]

标签:

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

标签:

原文地址:http://www.cnblogs.com/mumutouv/p/4267138.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!