可选择的工具尖端悬停元素

Question

I know that this question is rather vague but I couldn't find much information regarding to my problem. Basically, what I want to achieve, is a tool-tip that doesn't disappear when I hover it, allowing me to select its text.

Is this possible or do I have to create a div simulating the tool-tip?

For instance:

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

In this case, the div would appear as a tool-tip of foo .

Answer 1

It can be done by using transition property:

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