HTML 标题属性 - 减少延迟并在点击时显示

Question

如何在不编写脚本的情况下减少通过 html 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 title="Any way to make this instant?">ⓘ</span>
 </p>

这将是 HTML 的一个不错的功能，如果您可以：

调整延迟。
也在 click 上显示（而不是仅在 hover 上显示）。

我知道如何使用 Javascript 实现此目的，所以我只对 HTML 和 CSS 解决方案感兴趣。

Answer 1

要减少延迟并立即显示标题，您可以使用 CSS ::after 选择器。

HTML:（将 title 属性更改为 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;
}

演示：

<!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>

Answer 2

可以使用带有隐藏复选框的标签和动画控制延迟来实现，这会在点击和悬停时触发显示，点击时需要再次点击才能隐藏。

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>

HTML 标题属性 - 减少延迟并在点击时显示

HTML Title Attribute - Decrease Delay and Also Display on Click

html

css

tooltip