Jquery插件学习系列-QTip

最新推荐文章于 2024-03-09 15:38:57 发布

轻鸿飘羽

最新推荐文章于 2024-03-09 15:38:57 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

文章标签： jquery插件 attributes function string library html

本文链接：https://blog.youkuaiyun.com/geekjoker/article/details/8000147

本文介绍了Qtip这款JQuery提示插件的使用方法，并通过示例展示了如何使用该插件进行文字和图片提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Qtip是一款Jquery提示插件，该提示插件可以显示文字，图片，也可以动态的加载文字和图片，该插件网址：点击打开链接；该免费插件在使用时需要先导入Jquery插件，然后再导入Qtip插件。

(我将该网站在上面提供的Demo自己实验了一遍，感觉很好用，我将就着用他们提供的例子。)

1、使用实例（文字提示）：

上面是官网给出的一段代码，我实验了一把感觉很好用我在把页面的代码贴出来：

<body><div id="content"><a href="#">我是要被提示的部分</a></div></body>

当然div标签可以被任意的替换

2、带图片的提示：

官方代码：

<script type="text/javascript">
// Create the tooltips only on document load
$(document).ready(function() 
{
   // By suppling no content attribute, the library uses each elements title attribute by default
   $('#content a[href]').qtip({
      // Simply use an HTML img tag within the HTML string
      content: '<img src="/projects/qtip/images/owl_small.png" alt="Owl" />'
   });
});
</script>

再附上一些我补充的代码：

<body><div id="content"><a href="#">我是要被提示的部分我的提示是图片</a></div></body>