html / css / javascript hover 文本'dictionary

Question

I plan on making several pages of instructional topics in which some words should have popup text to further define a word. So far, my limited knowledge of creating a popup text includes (if an image):

<img src="\images\image1.png" alt="" title="hover text" />

But I am more after a popup box when hovering over text such as:

<p><dfn title="HyperText Markup Language">HTML</dfn> is the standard markup language for creating web pages.</p>
<p><dfn title="Cascading Style Sheets">CSS</dfn> is another standard markup language for creating web pages.</p>

If I have multiple instances of 'HTML' that I want associated with a popup to occur throughout a page, that would become rather cumbersome to ensure I have the exact same wordage for the definitions of 'HTML' or 'CSS' where they might appear. Is there some sort of class definition dictionary or perhaps a sort of function that can be utilized to wrap around every 'HTML' or 'CSS' instance? For example:

Here is some text leading up to the word <class = "definition", id = "HTML"> and I am continuing some text until I get to <class = "definition", id = "CSS"> and then I continue my text.

What would be the best practice for such a scenario? I want to ensure that the definitions are the same throughout the text and, as I expand to other pages, the same as well.

Answer 1

While the dfn element allows for making in-page links, this is not as smooth an experience for the user as hovering over a word as they have to do something to go back to where they were. It also doesn't automatically work across pages.

How about using CSS classes and after pseudo elements on dfns? I know this is putting stuff with actual meaning in the content, but it does work to a certain extent (there are the usual problems with where to fit your popup if near the end of a line for example).

To create the CSS you'd probably want to knock up some JS or some back-end script if you have a very long list of definitions.

Here is the code from the question marked up this way:

 dfn:hover::after { position: absolute; z-index: 9999; background-color: white; border-color: red; border-style: solid; padding: 5px; }.html:hover::after { content: 'HyperText Markup Language'; }.css:hover::after { content: 'Cascading Style Sheet'; }

 <p><dfn class="html">HTML</dfn> is the standard markup language for creating web pages.</p> <p><dfn class="css">CSS</dfn> is another standard markup language for creating web pages.</p>