javascript - 可选择的工具提示悬停在元素上

Question

我知道这个问题相当模糊，但我找不到关于我的问题的太多信息。 基本上，我想要实现的是一个工具提示，当我悬停它时它不会消失，允许我选择它的文本。

这是可能的还是我必须创建一个 div 来模拟工具提示？

例如:

<a id="foo">hover me</a>
<div class="box" id="tooltip">item 1<br/>item 2<br/>item 3<br/></div>

在这种情况下，div 将显示为 foo 的工具提示。

Answer 1

可以通过使用过渡属性来完成:

<style>
    .tooltip:after {
    opacity: 0;
    content: "";
    }
    .tooltip:hover:after { 
    opacity: 1;
    transition: opacity  0s linear 1s;
    content: " some text you want to keep ";
    }
</style>
<a href="#" class="tooltip">What am I?</a>