jquery的Tooltip插件 qtip使用详细说明

jQuery的qTip是一个功能丰富的Tooltip插件，它允许开发者在网页上添加动态的提示工具，这些提示工具能够以友好和美观的方式为用户提供额外信息。这个插件是基于流行的jQuery库，所以它很容易集成到各种使用jQuery的项目中。qTip对现代浏览器的兼容性较好，如Internet Explorer 6.0+、Firefox 2.0+、Opera 9.0+、Safari 3.0+、Google Chrome 1.0+、以及Konqueror 3.5+。 在使用qTip之前，需要引入jQuery核心文件以及qTip的JavaScript文件，如下所示： ```html <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery.qtip-1.0.0-rc3.min.js"></script> ``` qTip插件的使用包括了丰富的API，可以用来自定义提示内容、位置、样式等。下面举例介绍几个基本的使用方法。 1. **基础文本提示** 在HTML中定义一个链接，然后通过jQuery为该链接添加qTip提示，如以下代码所示： ```html <div id="content"> <a href="">Basic text</a> </div> ``` ```javascript $(document).ready(function() { $('#content a[href]').qtip({ content: 'Some basic content for the tooltip' }); }); ``` 这段代码将为id为content的div下的a元素添加一个包含文本“Some basic content for the tooltip”的提示。 2. **标题属性提示** 当链接包含title属性时，可以使用该属性作为提示的内容，同时可以指定样式： ```html <div id="content"> <a href="" title="That sounds familiar">Title attribute</a> </div> ``` ```javascript $(document).ready(function() { $('#content a[href][title]').qtip({ content: { text: false }, style: 'cream' }); }); ``` 这段代码将使用链接的title属性作为提示内容，并应用了一个名为cream的样式。 3. **图片提示** 如果想要在提示中显示图片，可以这样做： ```html <div id="content"> <a href="">Image</a> </div> ``` ```javascript $(document).ready(function() { $('#content a[href]').qtip({ content: '<img src="small.png" alt="Image"/>' }); }); ``` 以上代码将在提示中嵌入一个图片。 4. **自定义边角值** 可以使用API来设定提示框的边角值，以及对提示框的显示和隐藏行为进行自定义： ```javascript var corners = 'bottomLeft'; var opposites = 'topRight'; $(document).ready(function() { $('#content a').hover(function() { $(this).html(opposites).qtip({ content: corners, position: { corner: { tooltip: corners, target: opposites } }, show: { when: false, ready: true }, hide: false, style: { border: { width: 5, radius: 10 }, padding: 10, textAlign: 'center', tip: true, name: 'cream' } }); }); }); ``` 这段代码为链接添加了一个右上角的提示，并且自定义了提示框的边角样式。 5. **固定提示** 为图片添加一个固定的提示框，可以使用以下方式： ```html <div id="content"> <img src="sample.jpg" alt="" height="200"/> </div> ``` ```javascript $(document).ready(function() { $('#content img').each(function() { $(this).qtip({ content: '<a href="">Edit</a>|<a href...</a>', position: { my: 'bottom left', // 提示框锚点位置 at: 'top center', // 目标锚点位置 adjust: { method: 'shift' } }, show: { solo: true }, hide: { event: 'unfocus' }, style: { classes: 'qtip-bootstrap' // 可以指定预定义的样式 } }); }); }); ``` 这段代码会在图片上固定显示一个编辑链接的提示框。 总结来说，jQuery qTip插件是一个非常实用的工具，通过简单配置即可添加动态提示。开发者可以根据自己的需求，通过各种API参数来调整提示框的位置、样式、内容以及显示和隐藏的行为，让提示框更好地融入到网页设计当中。