Menu
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="Any way to make this instant?">ⓘ</span>
</p>This would be a nice feature of HTML, if you could:
click (instead of just on hover).I know how to achieve this with Javascript, so I'm only interested in HTML and CSS solutions.
815
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>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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
