提示框，鼠标经过提示文字框,提示弹出层-freejs.net代码演示

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

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

可以指定位置显示层

XML/HTML Code

<h3>Positioning</h3>
<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>
<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>
<h3>Containers</h3>
<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>
<div class="tooltip_container" style="width: 200px; height: 200px; border: 1px dotted #000; margin: 15px auto;"></div>
<pre class="brush: js;"><div class="tooltip_container" style="position: relative; width: 200px; height: 200px; border: 1px dotted #000; margin: 15px auto;"></div></pre>
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">
<p>We will only show up in the nifty box we made for tooltips.</p>
<p>Since you can add classes to tooltips, you can define special styling for the tips that go in containers.</p>
</span>.