Change How Fast "Title" Attribute's Tooltip Appears

Change how fast title attribute's tooltip appears

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.

Showing HTML title attribute faster

If you implement your own tooltip mechanism you can freely adjust the time it takes to show up. There is no way to modify the native tooltip.

How to make the tooltip to show immediately for some elements in JavaScript or CSS

Try this code:

            .showTooltip {          background-color: yellow;          padding:8px;          top: 20px;          left: 20px;          position: absolute;          margin: 0 auto;          border: 2px solid lightgrey;          cursor: pointer;          font-family: system, sans-serif;        }            .showTooltip:hover::after {          position: absolute;          content: attr(data-tooltip);          bottom: -2.5em;          right: -1em;          background-color: #333;          color: white;          padding: .25em .5em;          font-size: .8em;        }

    <div class="showTooltip" data-tooltip="I am a tooltip">    Hover over me and a tool tip appears after a few seconds    </div>

HTML Title Attribute - Decrease Delay and Also Display on Click

To reduce the delay and show title instantly, you can do this with CSS ::after selector.

HTML: (Change title attribute to data-title)

<p>
  Hover over the icon at the end of this sentence
  and notice the delay that occurs before the 
  advisory information is displayed.
    <span data-title="Anyway to make this instant?">ⓘ</span> 
</p>

CSS:

span 
{
    position: relative;
}

span:hover::after 
{
    content: attr(data-title);
    padding: 5px;
    width: 250px;
    border: 1px solid #000;
    position: absolute;
    top: 5px;
    left: 5px;
    background: #dc143c;
    color: white;
}

Demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span 
        {
            position: relative;
        }

        span:hover::after 
        {
            content: attr(data-title);
            padding: 5px;
            width: 250px;
            border: 1px solid #000;
            position: absolute;
            top: 5px;
            left: 5px;
            background: #dc143c;
            color: white;
        }
    </style>
</head>
<body>
    <p>
        Hover over the icon at the end of this sentence
        and notice the delay that occurs before the 
        advisory information is displayed.
        <span data-title="Anyway to make this instant?">ⓘ</span> 
    </p>
</body>
</html>

HTML Title tooltip gets cut off after spaces

I was able to create a workaround. Since any space would end the title attribute, I simply used a regex to properly escape all of the space characters for the copyResult variable.

var copyResult = copyResult.replace(/[ ]/g,"\u00a0")

\u00a0 is the Unicode character for NO-BREAK-SPACE.

How to increase default hover duration of a title attribute (tooltip)

I think this is operating system dependent and you should not try to override that.

The best way will be to create a custom tooltip.

Here are some good ones

jQuery Tooltip Plugin Demo

Change How Fast "Title" Attribute's Tooltip Appears