Jquery插件学习系列-QTip

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

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

1、使用实例(文字提示):

<script type="text/javascript">// Create the tooltips only on document load$(document).ready(function() { // Match all link elements with href attributes within the content div $('#content a[href]').qtip( { content: 'Some basic content for the tooltip' // Give it some content, in this case a simple string });});</script>

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

<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>



你可能感兴趣的:(Jquery插件学习系列-QTip)