
URL: http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html
BeautyTips is a comprehensive jQuery tooltips plugin that will allow you to dynamically draw tooltips associated with a html element on the page. These tips are highly configurable and can be triggered in many different ways.
By default each tooltip will be positioned on the side of the target element which has the most free space. Tip appears above the element when it is hovered or clicked. The contents of tip is provided when creating the tip. BeautyTips was written to be simple to use and pretty. All of its options are documented at the bottom of the .js file and defaults can be overwritten globally for the entire page, or individually for each target element (more about this in the wrapup section).
The canvas element is supported in major modern browser, such as FireFox, Safari, and Opera. However, Internet Explorer needs a separate library called ExplorerCanvas included on the page in order to support canvas drawing functions.
You can see lots number of examples in implementation, from simple to advance:
* hover and click tips
* content can be set from argument or attribute
* Pre/post functions: preShow, postShow, preHide, and postHide.
* customizable in CSS, using an additional class is added to the target element.
* using canvas methods and function to set a dynamical and highly configurable BeautyTip “balloon”
* images can be loaded into the BeautyTip.
* uses some special triggers of options so that the tip appears on certain spot (anywhere in the document)
* customizable triggers controling the tip to appear/disappear. The default option is ‘hover’, which will trigger the tip when the mouse hovers over an element.
* support hoverIntent plugin (hover and wait) that allows control over how and when the mouseOver event gets triggered when a user hovers over an element.
* support Ajax content, Ajax error, Ajax dynamic path, etc.
* big content in a click
* more advance uses: Netflix style, Google Maps, Facebook style
So this BeautyTips plugin is quite comprehensive and give you all. Have a jump to the the source page if you find this useful!










Twitter Updates
Loading...
With jQuery being as popular as it is, more and more people are writing plugins and creating component packages that are ready to use as-is
This is a great post! I’ve been looking for a a good Tool Tip with jQuery. Thanks for sharing!