abbr several times with one tag

Question

I'm writing a walk-through, and I'd like the reader to be able to hover over a word from anywhere within the script and get the definition, but I'd like to only define the abbr once. Is there a way in html or css that I can do this?

Answer 1

One way you can accomplish this is to use a custom tooltip with a pseudo element.

First, in your HTML, you wrap the words you want to define in a span (or maybe an <a> or whatever):

<p>This is a word I want to <span class="tooltip">define</span>.</p>

You can then give the tooltips a second class that you can use to set their content. This way, you can wrap all the words you want to define in your HTML but control their content from one central place (your stylesheet) and not have to modify the HTML if a definition needs tweaking.

<p>This is a word I want to <span class="tooltip define">define</span>.</p>

In your stylesheet, you'd set the basic styles for the pseudo element that goes with .tooltip, then do something like this to set the particular content using the second class:

.tooltip.define::before {
  content: 'determine or identify the essential qualities or meaning of';
}

The trickiest part of this is really getting the style of the tooltip to something you like.

In the example below, I have set white-space: nowrap in lieu of a minimum width on the pseudo element. Otherwise, you'll find that the text wraps at a very small width. This works well with all relatively short definitions, but if you have some definitions that would require a lot of text and others that would have one- or two-word definitions, you may need to also include the width of the pseudo element in the styles that goes along with your second class (that you use to specify the content) so as to avoid a situation where you have huge containers for tiny content or tons of word wrapping for long definitions.

For example:

.tooltip.longtext {
  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam interdum magna sit amet magna condimentum, id gravida tellus luctus. Nullam posuere eget lacus sit amet pulvinar.';
  min-width: 300px;
}
.tooltip.shorttext {
  content: 'Lorem ipsum';
  min-width: 0;
}

span {
  position: relative;
  color: blue;
}
.tooltip::before {
  display: block;
  position: absolute;
  z-index: -1;
  top: -100%;
  left: -50%;
  padding: 2px 5px;
  white-space: nowrap;
  font-size: 12px;
  text-align: center;
  background: #565656;
  color: white;
  visibility: hidden;
}
.tooltip:hover {
  cursor: pointer;
}
.tooltip:hover::before {
  visibility: visible;
  z-index: 1;
}
.tooltip.lots::before {
  content: 'many, several';
}
.tooltip.words::before {
  content: 'things that are said';
}
.tooltip.going::before {
  content: 'taking a certain course';
}

<p style="margin-top: 30px;">This is a very long paragraph that has <span class="tooltip lots">lots</span> and <span class="tooltip lots">lots</span> of <span class="tooltip words">words</span> you want to define, and it just keeps <span class="tooltip going">going</span> and <span class="tooltip going">going</span>, and some of the <span class="tooltip words">words</span> are the same, and you don't want to have to define them more than once.</p>