'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 appear.

javascript html

Solution 1:^[1]

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

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

Solution 2:^[2]

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 3:^[3]

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.

Solution 4:^[4]

Unfortunately, there is no way to do this yet,

so I am using the following methods to help. (No dependencies required)

<style>
  [title] {
    position: relative;
  }

  [title]:after {
    content: attr(title);
    position: absolute;
    left: 50%;
    bottom: 100%; /* put it on the top */
    background-color: yellow;
    width: max-content;
    opacity: 0;
    -webkit-transition: opacity 0.75s ease-in-out; /* ? Change the time to meet your requirements. */
  }

  [title]:hover:after {
    opacity: 1;
  }
</style>

<div style="min-height:5rem"></div>
<div style="min-width: 5rem; border: 2px solid red;" title="hello world">my div</div>
<button title="for debug">button</button>

If you don't want the title to conflict with it, you can use data-* ^{w3school.data-*} help you, for example.

<style>
  [data-tooltip] {
    position: relative;
  }

  [data-tooltip]:after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: 100%; /* put it on the top */
    background-color: yellow;
    width: max-content;
    opacity: 0;
    -webkit-transition: opacity 0.75s ease-in-out;
  }

  [data-tooltip]:hover:after {
    opacity: 1;
  }

  div[data-tooltip]:after {
    left: 5px!important;
  }
</style>

<div style="min-height:5rem"></div>
<div style="min-width: 5rem; border: 2px solid red;" data-tooltip="hello world">my div</div>
<button data-tooltip="for debug">button</button>
<button title="for debug">title only</button>
<button data-tooltip="my tool tip msg" title="my title msg">title and tooltip</button>

below link may help you too.