首页>>Jquery文字>>提示框，鼠标经过提示文字框,提示弹出层(2014-01-23)

提示框，鼠标经过提示文字框,提示弹出层

 可以指定位置显示层

提示框，鼠标经过提示文字框,提示弹出层
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <h3>Positioning</h3>  
  2.                 <p>The positioning options of Tippy are really powerful. Say you <span class="tippy" data-title="want a tooltip" data-headertitle="A fixed tooltip" data-position="fixed" data-top="40" data-right="40" data-autoclose="false">Help! I'm stuck in place!</span> that opens in a fixed position somewhere on your page. Tippy makes it easy.</p>  
  3.   
  4.                 <pre class="brush: js;"><span class="tooltip" data-title="want a tooltip" data-headertitle="A fixed tooltip" data-position="fixed" data-top="40" data-right="40" data-autoclose="false">Help! I'm stuck in place!</span></pre>  
  5.   
  6.                 <h3>Containers</h3>  
  7.                 <p>Let's get fancy with positioning. What if you have a div and you always want your tooltips to display in that div? Not a problem. Let's make our div:</p>  
  8.   
  9.                 <div class="tooltip_container" style="width: 200px; height: 200px; border: 1px dotted #000; margin: 15px auto;"></div>  
  10.   
  11.                 <pre class="brush: js;"><div class="tooltip_container" style="position: relative; width: 200px; height: 200px; border: 1px dotted #000; margin: 15px auto;"></div></pre>  
  12.   
  13.                 Now we need a <span class="tippy" data-title="tooltip to put in it" data-container=".tooltip_container" data-showheader="false" data-showclose="false" data-position="relative" data-top="2" data-left="2" data-width="195" data-height="174">  
  14.                     <p>We will only show up in the nifty box we made for tooltips.</p>  
  15.                     <p>Since you can add classes to tooltips, you can define special styling for the tips that go in containers.</p>  
  16.                 </span>.  

 


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