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

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

 可以指定位置显示层

演示

 

 

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