Change how fast “title” attribute's tooltip appears

Question

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

Answer 1

TippyJS has a billion customization options.

https://atomiks.github.io/tippyjs

https://github.com/atomiks/tippyjs

Answer 2

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.

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

Answer 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: http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/ ) where you can customise lot's of things, including delay.

Answer 5

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

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