HTML5: Nice tooltips with jQuery for Tooltipster

Tool tips are a nice touch. Finally, they make it possible to accommodate short information space exactly where they are important. Tooltipster is a jQuery plugin is available, can be used to quickly and easily achieve very appealing and custom tooltips. These are also HTML5 compliant and designed exclusively by CSS, which makes customizing the look simple.

tooltipster-jquery

Tooltips over TITLE attribute excel

Tooltipster  consists of two files, a JavaScript file with the jQuery plugin and a CSS file, the layout of the tool tip is adapted. Both files must be integrated with jQuery in the HTML Head. Then the plugin is started:

$ ( document ) . ready ( function ( )  {
  $ ( "tooltip." ) . tooltipster ( ) ;
} ) ;

In the example, the plugin is applied to all elements with the class “tooltip”. The content of the tooltips are awarded on the common TITLE attribute. The plugin converts the contents of this attribute then to send in tooltips, whose appearance can be adapted to the CSS file:

<a href="http://www.cssscoop.com/" title="CSS Tweaks" class="tooltip">cssscoop.com</a>

Html Tooltip Possible

Who more than pure text would fit into a tool tip that can do this with Tooltipster. The plugin allows you to place HTML elements within the TITLE attribute. These will be implemented in accordance with JavaScript:

The distinction may sound a bit strange, but it works. It should be noted only that the HTML code is displayed in the tooltip with JavaScript turned off as pure text. If you want to get the standard representation of the TITLE attribute as a fallback should not use HTML in the tooltip.

Custom Themes and Settings

In addition to the default theme more custom themes using CSS are possible. The themes are passed through the plugin call as an option:

$ ( ". tooltip" ) . tooltipster ( {
  tooltipTheme :  ". my-tooltip"
} )

There are also other options available on the behavior of the tooltips can be controlled. For example, to specify whether the tooltip will be in a fixed position or whether it should be based on the mouse pointer:

$ ( "tooltip." ) . tooltipster ( {
  followMouse :  true
} ) ;

Subscribe and never miss a post!

Subscribe to the free newsletter now and get fresh content delivered straight into your inbox. (No spam, we promise)

Comments

  1. Thanx for sharing such useful information. I will try to use HTML5 specially with jQuery.

Comment Policy:

Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please. You can wrap code in [lang-name][/lang-name] tags.


Tell us what you're thinking...

If you want a picture to show with your comment, then get Gravatar!

*