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.

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
} ) ;