jQuery提示插件 qTip

 查看演示  website  立即下载

使用方法

安装qTip只包括jQuery 和qTip库文件例如jquery.qtip-1.0.0.min.js使用脚本的 html 元素，就像这样：

<script type="text/javascript" src="js/jquery.1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.qtip-1.0.0.min.js"></script>

HTML 结构

一旦创建，所有的工具提示在此窗体中有一个共同的 HTML 结构：

<div class="qtip qtip-stylename">
   <div class="qtip-tip" rel="cornerValue"></div>
   <div class="qtip-wrapper">
      <div class="qtip-borderTop"></div> // Only present when using rounded corners
      <div class="qtip-contentWrapper">
         <div class="qtip-title"> // All CSS styles...
            <div class="qtip-button"></div> // ...are usually applied...
         </div>
         <div class="qtip-content"></div> // ...to these three elements!
      </div>
      <div class="qtip-borderBottom"></div> // Only present when using rounded corners
   </div>
</div>

当造型工具提示所有额外的 CSS 样式应应用于内容和标题的元素，除非您特别造型其他元素 ！

创建工具提示

用qTip创建工具提示是非常简单的。你想要应用一个工具提示，使用jQuery 的选择器的元素列表的生成如下所示：

$('ul:last li.active')

例如上面的代码将生成的是页面上的最后一个 ul 元素，所有元素的数组。一旦您确定了您的元素数组，您只调用qtip()方法，以及选项对象来指定工具提示，像这样：

$('ul:last li.active').qtip({
   content: 'This is an active list element',
   show: 'mouseover',
   hide: 'mouseout'
})

这将创建包含任何列表项，鼠标移动将显示内容和隐藏

PREVIOUS:
NEXT:
jQuery工具提示插件Poshy Tip
jQuery分页插件jPages