Hover Text on code surrounded text

Question

Was looking for a way for informational text to show up once the mouse hovers over a few words anywhere within the website. I see that there are some plugins that handle this but they dont seem to do anything witin custom content types created by the site admin. In addition, tey dont sem to work for specific html tags surrounding the text I wish to be a glossary term.

For example, lets say I have the words "Option 1" between two list tags (li) I would want it to read "Here is text" upon someone mousing over "Option 1" which appears in an unordered list.In other words, I specifically want it to work for all instances of "Option 1" that appear enclosed within (li) tags

Is this request too far fetched? Maybe there is a different way to do this entirely. I just want people to be able ot select options from a checkbox, but have a way to see what those options are in detail from that page where they are listed. Tooltips seem to work well for glossary entries so I figured maybe the same could be done.

Seems that most of the tooltip plugins are not setup in lieu of WordPress Custom Content Types.

Answer 1

The simplest way is simply to add the title attribute, like to make a list tag that looks like this:

<li title="Here is text">
    Option 1
</li>

Of course, this, you can't style, or modify - it's entirely interpreted by the browser. Alternatively, you could look into creating your own tooltips, using Javascript or CSS3.