Change how fast “title” attribute’s tooltip appears

Change how fast “title” attribute’s tooltip appears

Is there a way to change how fast the tooltip from an element’s “title” attribute? I’d like it if the tooltip appeared immediately, but it seems to take a few seconds to apear.


Solution 1:

No, there’s no way. The title attribute is implemented in a browser dependent fashion. For example I remember differences between IE and FF when using \r\n inside it.

Mozilla’s docs explain the limits and functionality well.

If you want customization you may take a look at third party plugins such as qTip2 which mimic it using divs and stuff and provide you full control.

Solution 2:

You could use jqueryUI as suggested. An example of controlling the duration on the show property:

$( ".selector" ).tooltip({ show: { effect: "blind", duration: 800 } });

Solution 3:

Jquery UI tooltip is extremely simple and customizable: Just download or include jquery UI in your page.

If you want all the tooltips of your page to show immediately at hover, just use this:

$(document).tooltip({show: null});

Note that this applies to all elements that have a ‘title’ attribute.
You can modify the selector to affect only a class, and set custom speed or effect:

$('.yourClass').tooltip({show: {effect:"none", delay:0}});

Solution 4:

It isn’t possible to change how fast default browser’s tooltip appear, but you can use one of the tooltip plugins (here is few: ) where you can customise lot’s of things, including delay.