Efficient HTML tooltip rendering (reusing tooltips)

Question

I am generating html that displays records at a field level (i.e. name, dob, favorite programming language, etc.) and am creating html tooltips for each field.

I know that headers could be used but I am displaying different types of records and would like to allow the user a quick tooltip to show them what they are looking at.

This works fine for a small number of records, but when I have thousands of records, the html is largely composed of the same tooltip data over and over.

I'd like to somehow pre-create these tooltips in css or in javascript to only have to render the actual tooltip content once on the page but reusable by specifying a class (or similar).

For example, given:

<div class="field tooltip">bar<span class="tooltiptext">This
 field represents what foo needs</span></div>

I'd like to use something like this instead:

<div class="field tooltip tt-bar">bar</div>

where tt-bar refers to a tooltip created using css and/or javascript.

Any ideas would be very appreciated.

Note: I am not using JQuery or any other libs and I'd like to keep it that way.

related: https://stackoverflow.com/questions/2011142/how-to-change-the-style-of-the-title-attribute-inside-an-anchor-tag — Vickel, Jan 18 '19 at 18:23

p.s.w.g · Accepted Answer · 2019-01-18T21:32:26.933

Here's a fairly quick and dirty solution using only CSS.

*[data-tooltip] {
  text-decoration: underline dashed;
  position: relative;
}

*[data-tooltip]:hover:before {
  background: #333;
  border-radius: 4px;
  color: #ccc;
  content: attr(data-tooltip);
  padding: 2px 4px;
  position: absolute;
  white-space: nowrap;
  top: calc(100% + 4px);
}

*[data-tooltip]:hover:after {
  background: #333;
  content: '';
  width: 6px;
  height: 6px;
  position: absolute;
  white-space: nowrap;
  top: calc(100% + 1px);
  left: 8px;
  transform: rotate(45deg);
}

foo <span data-tooltip="This field represents what foo needs">bar</span> baz

If your tooltip text is known, you can even get rid of the data-tooltip attribute, and bake it into the content property in CSS:

.tooltip {
  text-decoration: underline dashed;
  position: relative;
}

.tooltip:hover:before {
  background: #333;
  border-radius: 4px;
  color: #ccc;
  padding: 2px 4px;
  position: absolute;
  white-space: nowrap;
  top: calc(100% + 4px);
}

.tooltip:hover:after {
  background: #333;
  content: '';
  width: 6px;
  height: 6px;
  position: absolute;
  white-space: nowrap;
  top: calc(100% + 1px);
  left: 8px;
  transform: rotate(45deg);
}

.tooltip.tt-bar:hover:before {
  content: 'This field represents what foo needs';
}

foo <span class="field tooltip tt-bar">bar</span> baz

This is an interesting approach, although I was trying to avoid specifying the content inline. I did create a version that used a javascript map of tooltips and then assigned them to the fields' innerHTML. While that does keep the size of the file down, on large files it takes considerably longer to complete the javascript. For now I am just specifying the content inline. On my test file, the full version is 22MB but renders in 30 secs vs 8MB that takes about 3 minutes to complete the javascript routine. — Brice, Jan 18 '19 at 21:28
@Brice I've provided an alternative that shows how to avoid using an inline tooltip. — p.s.w.g, Jan 18 '19 at 21:33
Wonderful! I used your construct and it worked perfectly. Inspired by your first snippet, I tried unsuccessfully to use content and after to do what you did in the second snippet. Thank you @p-s-w-g. — Brice, Jan 19 '19 at 03:27

Efficient HTML tooltip rendering (reusing tooltips)

1 Answers1