Jquery 插件 qtip 实现丰富的提示效果

在html中，我们如过实现 鼠标移到元素上给出提示的话，我们可以为每个元素增加title 属性。但是这样的提示不够美观，qtip的出现给我们增强效果提供了新的选择，官网地址如下

http://craigsworks.com/projects/qtip/ 里面有好多的demo。代码页介绍的好详细。

主要有以下功能供我们选择

以及以下各种插件，可根据自己需要选择：

1. Ajax，这个不用说，请求远程内容的
2. Tips，气泡对话效果，如箭头
3. Modal，模态对话框效果，如jQuery UI Dialog /ThickBox 的效果
4. Image map，提供对map内area标记的提示支持

除了以上插件的功能外，它的主要功能有（仅列出较常用的）：

1. 设置提示的内容、标题、关闭按钮等
2. 使用元素的属性，来作为提示信息内容，如链接的标题(<a title="提示信息")、图片的提示(<img src="提示信息")等等
3. 提示信息显示的位置
4. 提示信息的目标，即显示到什么元素上
5. 提示信息显示/隐藏触发的事件，如鼠标移到元素上、点击(mouseenter,click)
6. 提示信息显示/隐藏的效果
7. 外观的定义，通过相应样式设置
8. 跟随可拖动目标、鼠标指针等 

下面

使用也很简单

导入  jquery 文件 和插件的文件库，

script src="lib/jquery-1.8.0.min.js"></script>
	<script src="lib/jquery.qtip-1.0.0-rc3.js"></script>

<span id='imgtootip'>无所谓</span> 

在这里我实现一个图片的提示效果

  $('#imgtootip').qtip({content:{text:'<img style="width:40px;height:40px" src="Apple.jpg"/>',title:{text:'我的标题'}},hide:'unfocus',position: {
                corner: {
                    tooltip: 'topMiddle',
                    target: 'bottomMiddle'
                }
           },style:{tip:true,name:'cream'}

 
content 即为显示内容，当然我们可以 设置显示的内容以及标题，hide设置为 unfocus 即为 失去焦点是 提示框自动隐藏

style 来设置属性。比如有无箭头，颜色（'dark','cream','green','red','light','blue'）主题样式等等，在设置corner中 tootip 为提示框中的箭头相对提示框的位置。

target是 代表提示框相对提示内容的位置。取值 如下选择

 [
   'bottomLeft', 'bottomRight', 'bottomMiddle',
   'topRight', 'topLeft', 'topMiddle',
   'leftMiddle', 'leftTop', 'leftBottom',
   'rightMiddle', 'rightBottom', 'rightTop'
];

还可以 把元素的属性设为显示内容

在html中添加如下代码

                       <a  tootip='我的属性2' href="http://www.baidu.com">Basic text</a>
<a  tootip='我的属性3' href="http://www.baidu.com">Basic text</a>
<a  tootip='我的属性4' href="http://www.baidu.com">Basic text</a> 

需要注意的是 content的是动态获取的。 获取所有的a 然后 遍历为每一个 元素创建tootip

$('a').qtip({content:$('a').attr('tootip'),style: 'cream'}); 
 $('#content a').each(function(index) {
$(this).qtip(

{content:$(this).attr('tootip'),style:'dark'}
)
 });

创建模式对话框，模式对话框主要有一个 对话框以及一个遮罩层来组成的

 $('a[rel="modal"]:first').qtip(
   {
      content: {
         title: {
            text: '模式对话框',
            button: '关闭'
         },
         text: '这是一个模式对话框，测试专用'
      },
      position: {
         target: $(document.body), // 设置位置相对于真个文档
         corner: 'center' // 位置设置为文档中间
      },
      show: {
         when: 'click', // 在点击事件触发后呈现该对话框，如果要执行其他的事件，可以写这里面
         solo: true // 隐藏其他的tooltip 只显示这一个
      },
      hide: false,//如果不设置 点击对话框外的部分此对话框将会消失,关闭之前如果要执行其他的事件，也可以写这里面
      style: {
         width: { max: 350 },
         padding: '14px',
         border: {
            width: 9,
            radius: 9,
            color: '#666666'
         },
   
         name: 'red'
      },
      api: {
         beforeShow: function()
         {
            // 显示遮罩层
            $('#qtip-blanket').fadeIn(this.options.show.effect.length);
         },
         beforeHide: function()
         {
            // 隐藏遮罩层
            $('#qtip-blanket').fadeOut(this.options.hide.effect.length);
         }
      }
   });

   // 设置一个div作为遮罩层，当显示对话框时填满浏览器窗口
   $('<div id="qtip-blanket">')
      .css({
         position: 'absolute',
         top: $(document).scrollTop(), // Use document scrollTop so it's on-screen even if the window is scrolled
         left: 0,
         height: $(document).height(), // Span the full document height...
         width: '100%', // ...and full width

         opacity: 0.2, // 设置遮罩层透明
         backgroundColor: 'black',
         zIndex: 5000  // tootip 的Zindex都是在 6000以上 为了确保 遮罩层在对话框一下，设置为5000
      })
      .appendTo(document.body) // 增加到文档中
      .hide(0); // 初始化的时候隐藏