How to display a definition on hover over a word that is in a sentence?

Question

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.com/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 community.</p>

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

Answer 1

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 community.</p>