首页>>Jquery文字>>漂亮的ToolTip效果(2014-04-28)

漂亮的ToolTip效果

 样式已经定义好了，直接按照案例操作即可

漂亮的ToolTip效果
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="container">  
  2.           
  3.         <div class="item-tooltip">  
  4.             <div class="item">  
  5.                 <span class="top-title">Sweet Strong </span>  
  6.                 <div class="image-item"><img src="images/sweet-strong.png" /></div>  
  7.             </div>  
  8.             <div class="item-information">  
  9.                 <span class="title">Style Name </span>  
  10.                 <span class="information-content">  
  11.                     tooltip-sweet-strong  
  12.                 </span>  
  13.                 <span class="title">Example </span>  
  14.                 <span class="information-content">  
  15.                     Hover <a href="#" class="sweet-tooltip" data-style-tooltip="tooltip-sweet-strong" data-text-tooltip="Howdy, I'm your tooltip :) ">this link</a> to see how this tooltip works  
  16.                 </span>  
  17.             </div>  
  18.         </div>  
  19.           
  20.         <div class="item-tooltip">  
  21.             <div class="item">  
  22.                 <span class="top-title">Mini Slick </span>  
  23.                 <div class="image-item"><img src="images/mini-slick.png" /></div>  
  24.             </div>  
  25.             <div class="item-information">  
  26.                 <span class="title">Style Name </span>  
  27.                 <span class="information-content">  
  28.                     tooltip-mini-slick  
  29.                 </span>  
  30.                 <span class="title">Example </span>  
  31.                 <span class="information-content">  
  32.                     Hover <a href="#" class="sweet-tooltip" data-style-tooltip="tooltip-mini-slick" data-text-tooltip="Edit Me? ">this link</a> to see how this tooltip works  
  33.                 </span>  
  34.             </div>  
  35.         </div>  
  36.           
  37.         <div class="item-tooltip">  
  38.             <div class="item">  
  39.                 <span class="top-title">Big Grey </span>  
  40.                 <div class="image-item"><img src="images/big-grey.png" /></div>  
  41.             </div>  
  42.             <div class="item-information">  
  43.                 <span class="title">Style Name </span>  
  44.                 <span class="information-content">  
  45.                     tooltip-big-grey  
  46.                 </span>  
  47.                 <span class="title">Example </span>  
  48.                 <span class="information-content">  
  49.                     Hover <a href="#" class="sweet-tooltip" data-style-tooltip="tooltip-big-grey" data-text-tooltip="This is our tooltip. <br/> How about yours? ">this link</a> to see how this tooltip works  
  50.                 </span>  
  51.             </div>  
  52.         </div>  
  53.           
  54.         <div class="item-tooltip">  
  55.             <div class="item">  
  56.                 <span class="top-title">Nightly </span>  
  57.                 <div class="image-item"><img src="images/nightly.png" /></div>  
  58.             </div>  
  59.             <div class="item-information">  
  60.                 <span class="title">Style Name </span>  
  61.                 <span class="information-content">  
  62.                     tooltip-nightly  
  63.                 </span>  
  64.                 <span class="title">Example </span>  
  65.                 <span class="information-content">  
  66.                     Hover <a href="#" class="sweet-tooltip" data-style-tooltip="tooltip-nightly" data-text-tooltip="Nightly Nightly">this link</a> to see how this tooltip works  
  67.                 </span>  
  68.             </div>  
  69.         </div>  
  70.           
  71.         <div class="item-tooltip">  
  72.             <div class="item">  
  73.                 <span class="top-title">Shiny Red </span>  
  74.                 <div class="image-item"><img src="images/shiny-red.png" /></div>  
  75.             </div>  
  76.             <div class="item-information">  
  77.                 <span class="title">Style Name </span>  
  78.                 <span class="information-content">  
  79.                     tooltip-shiny-red  
  80.                 </span>  
  81.                 <span class="title">Example </span>  
  82.                 <span class="information-content">  
  83.                     Hover <a href="#" class="sweet-tooltip" data-style-tooltip="tooltip-shiny-red" data-text-tooltip="This is shiny red">this link</a> to see how this tooltip works  
  84.                 </span>  
  85.             </div>  
  86.         </div>  
  87.           
  88.         <div class="item-tooltip">  
  89.             <div class="item">  
  90.                 <span class="top-title">Soft Blue </span>  
  91.                 <div class="image-item"><img src="images/soft-blue.png" /></div>  
  92.             </div>  
  93.             <div class="item-information">  
  94.                 <span class="title">Style Name </span>  
  95.                 <span class="information-content">  
  96.                     tooltip-soft-blue  
  97.                 </span>  
  98.                 <span class="title">Example </span>  
  99.                 <span class="information-content">  
  100.                     Hover <a href="#" class="sweet-tooltip" data-style-tooltip="tooltip-soft-blue" data-text-tooltip="Really soft blue">this link</a> to see how this tooltip works  
  101.                 </span>  
  102.             </div>  
  103.         </div>  
  104.           
  105.         <div class="item-tooltip">  
  106.             <div class="item">  
  107.                 <span class="top-title">Big Yellow </span>  
  108.                 <div class="image-item"><img src="images/big-yellow.png" /></div>  
  109.             </div>  
  110.             <div class="item-information">  
  111.                 <span class="title">Style Name </span>  
  112.                 <span class="information-content">  
  113.                     tooltip-big-yellow  
  114.                 </span>  
  115.                 <span class="title">Example </span>  
  116.                 <span class="information-content">  
  117.                     Hover <a href="#" class="sweet-tooltip" data-style-tooltip="tooltip-big-yellow" data-text-tooltip="This is big yellow">this link</a> to see how this tooltip works  
  118.                 </span>  
  119.             </div>  
  120.         </div>  
  121.           
  122.     </div>  

 


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