首页>>Jquery文字>>qtip浮动提示框插件图片或文字异步ajax提示框(2017-11-08)

qtip浮动提示框插件图片或文字异步ajax提示框

qtip浮动提示框插件图片或文字异步ajax提示框
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

XML/HTML Code
  1. <div class="demo">  
  2.       
  3.     <a class="nameInfo fl " title="猫头鹰" href="#" rel="data.php?id=2">鼠标经过图片展示效果</a>  
  4.       
  5. </div>  

 

JavaScript Code
  1. <script class="example" type="text/javascript">  
  2. // 创建工具提示文件加载  
  3. $(document).ready(function(){  
  4.   
  5.     // 使用each（）方法来获得每个元素的属性  
  6.     $('.nameInfo').each(function(){  
  7.         $(this).qtip({  
  8.             content: {  
  9.                 // 设置您要使用的文字图像的HTML字符串，正确的src URL加载图像  
  10.                 text: '<img class="throbber" src="images/throbber.gif" alt="Loading..." />',  
  11.                 url: $(this).attr('rel'), // 使用的URL加载的每个元素的rel属性  
  12.                 title:{  
  13.                     text: $(this).attr("title"), // 给工具提示使用每个元素的文本标题  
  14.                     button: '关闭' // 在标题中显示关闭文字按钮  
  15.                 }  
  16.             },  
  17.             position: {  
  18.                 corner: {  
  19.                     target: 'bottomMiddle', // 定位上面的链接工具提示  
  20.                     tooltip: 'topMiddle'  
  21.                 },  
  22.                 adjust: {  
  23.                     screen: true // 在任何时候都保持提示屏幕上的  
  24.                 }  
  25.             },  
  26.             show: {   
  27.                 when: 'mouseover', //或click   
  28.                 solo: true // 一次只显示一个工具提示  
  29.             },  
  30.             hide: 'unfocus',  
  31.             style: {  
  32.                 tip: true, // 设置一个语音气泡提示在指定工具提示角落的工具提示  
  33.                 border: {  
  34.                     width: 0,  
  35.                     radius: 4  
  36.                 },  
  37.                 name: 'light', // 使用默认的淡样式  
  38.                 width: 390 // 设置提示的宽度  
  39.             }  
  40.         })  
  41.     });  
  42.       
  43. });  
  44. </script>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_645.html