3

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.

Jack Bashford
  • 43,180
  • 11
  • 50
  • 79
Alex Courtney
  • 31
  • 1
  • 2
  • 1
    Have a look: https://stackoverflow.com/questions/1055581/how-do-i-add-a-tool-tip-to-a-span-element – PM 77-1 Feb 01 '19 at 00:27

2 Answers2

3

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>
Dan Crews
  • 3,067
  • 17
  • 20
  • This is essentially the same as my answer. – Jack Bashford Feb 01 '19 at 00:39
  • 1
    True, though semantically speaking, this one is also going to be more correct, and unfortunately it didn't tell me your answer until after I finished writing mine. – Dan Crews Feb 01 '19 at 00:40
  • This is not the correct usage of the `dfn` element. The `title` attribute has to contain the term being defined, not the definition itself. The context (in a `p`, `dd` or `section` element) has to be the definition. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dfn – Peter May 05 '21 at 13:28
  • Future me agrees with you. To get the desired result and also follow more closely to the standard, `abbr` could be used, but that's not quite semantically true, either. – Dan Crews May 06 '21 at 22:35
  • Well, that's disappointing. I'm going to go with `the term` anyway. – Charlie Gorichanaz Jul 13 '21 at 02:04
1

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 community.</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 community.</p>
Jack Bashford
  • 43,180
  • 11
  • 50
  • 79