After writing down a set of rules for a website, I want to give certain words a definition. My idea was that it would be best when a person hovers over a word, that the definition will pop up below or at the top of the word, whilst the text around the word itself remains in place.

I have looked all over and I cannot find a proper way to do this. I have offcourse looked at: .asp

This is very close to what I want to achieve, but I cannot seem to find out on how to get text in front and after the word I want to hover over and then display a definition.

Hopefully I am clear in my wording here.

On a side note, only html, css and javascript should be used.

Example:

<p>Rule number 1: Please be respectful in our munity.</p>

I would want a hover on the word respectful that displays a text above it with a definition.

After writing down a set of rules for a website, I want to give certain words a definition. My idea was that it would be best when a person hovers over a word, that the definition will pop up below or at the top of the word, whilst the text around the word itself remains in place.

I have looked all over and I cannot find a proper way to do this. I have offcourse looked at: https://www.w3schools./howto/howto_css_tooltip.asp

This is very close to what I want to achieve, but I cannot seem to find out on how to get text in front and after the word I want to hover over and then display a definition.

Hopefully I am clear in my wording here.

On a side note, only html, css and javascript should be used.

Example:

<p>Rule number 1: Please be respectful in our munity.</p>

I would want a hover on the word respectful that displays a text above it with a definition.

• javascript
• html
• css

• 1 Have a look: stackoverflow./questions/1055581/… – PM 77-1 Commented Feb 1, 2019 at 0:27
• This question should never have been closed, as it is not a duplicate of the linked question. The linked question is about adding a tooltip to a span. This question is about adding a definition as you hover over a term. The answers to the two questions are different. And while you may hack one by using the other, they are not the same, and not interchangable. – Ian Boyd Commented Feb 5, 2024 at 22:52
• @IanBoyd the question suggested as similar to this, includes both ways to add a tooltip via the title attribute and using pseudo-elements via css rules. The content itself is irrilevant but the way to achieve the result is the same – Diego D Commented Feb 6, 2024 at 13:18
• @DiegoD And perhaps the way to achieve the very different questions is the same. But they are very different questions. And...different answers. And even if both had the exact same answer, they are not duplicate questions. – Ian Boyd Commented Feb 6, 2024 at 15:11
• @ianboyd let's put it this way: it's an old question that has nothing to be added anyway. The answers were given and they were upvoted. Those answers by the way perfectly match with the same answers given to the similar question hinted except for the dfn element that it's interesting to know about but still don't change the fact it's the question to be similar.. the answer should be given to the other original question. And yet those answers are missing the shades of pseudo elements strategy. The lines are shaded of course but let's be honest. If you split the hair there's no line anymore – Diego D Commented Feb 6, 2024 at 15:20

2 Answers 2

There is already a tag specifically for this, if you don't mind holding your mouse over it for a moment, the DEFINITION tag or <dfn>. By default, it italicizes the text, but you can change that styling however you'd like to. This is going to be more semantically accurate than just using something like a span or div, but it doesn't really matter which you do. It's the title on the element that does the magic.

<p>Rule number 1: Please be <dfn title="don't be a jerk">respectful</dfn> in our munity.</p>

You could use the title attribute on a <span> element (hover for a second over respectful:

<p>Rule number 1: Please be <span title="feeling or showing deference and respect">respectful</span> in our munity.</p>

Or, you could use the HTML5 <dfn> (definition) tag for semantics, although you'd still need the title attribute:

<p>Rule number 1: Please be <dfn title="feeling or showing deference and respect">respectful</dfn> in our munity.</p>