How do I add a tool tip to a span element?

Question

In the following code, I want a tool-tip to come up when the user hovers the span, how do I do that? I don't want to use any links.

<span> text </a>

Answer 1

Here's the simple, built-in way:

<span title="My tip">text</span>

That gives you plain text tooltips. If you want rich tooltips, with formatted HTML in them, you'll need to use a library to do that. Fortunately there are loads of those.

Answer 2

In most browsers, the title attribute will render as a tooltip, and is generally flexible as to what sorts of elements it'll work with.

<span title="This will show as a tooltip">Mouse over for a tooltip!</span>
<a href="http://www.stackoverflow.com" title="Link to stackoverflow.com">stackoverflow.com</a>
<img src="something.png" alt="Something" title="Something">

All of those will render tooltips in most every browser.

Answer 3

the "title" attribute will be used as the text for tooltip by the browser, if you want to apply style to it consider using some plugins