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.

Answer 1

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

Efficient HTML tooltip rendering (reusing tooltips)

1 个答案: