HTML Title Attribute - Decrease Delay and Also Display on Click-CodePudding

How can I decrease the delay that occurs before advisory information is displayed via the html title attribute, without scripting?:

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

This would be a nice feature of HTML, if you could:

Adjust the delay.
Also display upon click (instead of just on hover).

I know how to achieve this with Javascript, so I'm only interested in HTML and CSS solutions.

CodePudding user response：

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>

CodePudding user response：

it can be achieved using label with hidden checkbox and using animation to control the delay, that'd trigger showing it on both click and hover, when clicked you need to click it again to hide it.

input {
  display: none;
}

.tooltip-contents {
  opacity: 0;
  user-select: none;
}

input:not(:checked)   label:hover .tooltip-contents,
input:checked   label .tooltip-contents {
  opacity: 1;
  user-select: initial;
}

label:hover .tooltip-contents {
   animation-name: show;
   animation-duration: 1s;
}

@keyframes show {
  0% {
    opacity: 0;
  }
  
  99% {
    opacity: 0;
  }
  
  100% {
    opacity: 1;
  }
}

<input type="checkbox" id="tooltip-1">
<label for="tooltip-1">
  click or hover here for tooltip
  <p class="tooltip-contents">add your title text here</p>
</label>