Show span title on click like on mouseover

Question

How can I show a span title on click on the span element? In general, the span title is shown on mouseover. So I want the same when the span is clicked. How can this be done?

<span title="abc">def</span>

Answer 1

You can actually do this with a pseudo element.

It's not clear whether the 'click' is intended to mean mouse hold down (:active) or a formal 'click' process.

For the former, you can do this.

span {
    position: relative;
}
span:active:after {
    content:attr(title);
    padding:5px;
    border:1px solid #ccc;
    top:5px;
    right:10%;
    background: #bada55;
}

<span title="abc">def</span>

For the latter then adding a class that displays the pseudo element would be the obvious solution.

See this JSfiddle