When we use the normal title/tooltip feature, in every browser it shows until the mouse is on top of it except in IE. In Internet Explorer browser it fades away after 5 seconds which is the browser default behavior.

To have a quick and best workaround, we can use the Jquery UI way so that it will remain there until the mouse over is on and behaves consistently in all browsers. Added advantage is we can customize the look and feel of tooltip with ease via CSS tweaks.

  1. Need to refer jquery-1.10.2.js or latest
  2. Need to refer 1.11.4 version or latest of jquery-ui.js
  3. Need to refer jquery-ui.css
  4. Include Script tag in page as:<script>$(function() { $( document ).tooltip(); });</script>

Thats all it needs. Now if you want to customize the way tooltip looks, go to the jquery-ui.css file and find the tooltip class. Just mention your styles in it with ‘!important’ attribute. Thus it works.

Ref: http://jqueryui.com/tooltip/

Leave a Reply