Hot!Ajax

jQuery Plugin: betterTip

Thursday, 18 October 2007

原文：http://edgarverle.com/BetterTip/default.cfm

BetterTip是一个jquery的插件，基于Cody Lindley's jTip，但更为灵活。

预览：

DEMO

Documentation:

To use BetterTip you first have to obtain the jQuery Library. Next you'll need to Download BetterTip. This download contains a compressed version of BetterTip as well as an uncompressed version. It also contains all the images and a css file. The compressed version with the images and css is 10.4KB and the uncompressed version is 12.4KB.

In the header section of the page you want to use BetterTip, you'll need to add references to jQuery, BetterTip, and the BetterTip css file as follows:

<link rel="stylesheet"   href="path-to/BetterTip/jquery.bettertip.css" type="text/css"   />
 <script type="text/javascript"   src="path-to-jquery/jquery-1.1.3.1.js"></script>
 <script   type="text/javascript"   src="path-to/BetterTip/jquery.bettertip.js"></script>

Now you can set BetterTip options. This step is optional.
There are only three options, and they are as follows:

openWait -- the number of milliseconds the user should hover before the tooltip opens (default: 500)
closeWait -- the number of milliseconds the tooltip stays open after the user moves the mouse out (default: 0)
enableCache -- true or false, indicating whether or not AJAX calls should be cached (default: true)

<script   type="text/javascript">
 $(function(){
BT_setOptions({openWait:2000,   closeWait:4000, enableCache:false}); 
 </script>

You can tell BetterTip to open a tooltip over a div or an a element. You can create a tooltip on an a element as follows:

<a id="mylink" href="ajax.cfm?width=250"   class="betterTip" title="$none">
 Dynamic tooltip an 'a'   element
 </a>

The a element must have an id and have its class attribute set to betterTip. The title attribute indicates what the title of the tooltip should read. There are two special values you can use for the title. Use $none if you do not want a title or a title bar, and you can use $content if you want the title to be the same as the text the user hovers over. The href attribute specifies where the content of the tooltip should come from. You can specify how wide you want the tooltip to be by adding a width parameter to the querystring. The default width is 250px. If the href attribute starts with a $, it tells BetterTip to grab the content from another element on the page. For example, an href value of $mydiv?width=500 will use the text stored in a div with id="mydiv" and set the width of the tooltip to 500px, as in this example:

<a id="mylink" href="$mydiv?width=500"   class="betterTip" title="$content">
 Static tooltip an 'a'   element
 </a>

 <div id="$mydiv"   style="display:none;">
Here is the content for the   tooltip! 
 </div>

To make a tooltip appear above a div, the same concept applies. Here is the format:

<div class="betterTip" id="div1"   style="background-color:#eeeeee;">

<a id="a1"   href="ajax.cfm?width=300" class="betterTip"   title="$none"></a>
Dynamic tooltip for a div 
 </div>

You simply put a blank a inside a div. Again, make sure that both the a and the div have unique ids and that both of them have a class attribute equal to betterTip.

下载：http://www.hotajax.org/download/jquery/bettertip.zip

Set as favorite

Bookmark

Email This

Comments (0) add comment