javascript - 高效的 HTML 工具提示渲染(重用工具提示)

Question

我正在生成在字段级别(即姓名、出生日期、最喜欢的编程语言等)显示记录的 html，并正在为每个字段创建 html 工具提示。

我知道可以使用标题，但我正在显示不同类型的记录，并希望允许用户使用快速工具提示向他们展示他们正在查看的内容。

这适用于少量记录，但当我有数千条记录时，html 主要由相同的工具提示数据一遍又一遍地组成。

我想以某种方式在 css 或 javascript 中预先创建这些工具提示，只需要在页面上呈现一次实际的工具提示内容，但可以通过指定类(或类似类)重复使用。

例如，给定:

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

我想改用这样的东西:

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

其中 tt-bar 是指使用 css 和/或 javascript 创建的工具提示。

如有任何想法，我们将不胜感激。

注意:我没有使用 JQuery 或任何其他库，我希望保持这种状态。

Answer 1

这是一个仅使用 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

如果您的工具提示文本是已知的，您甚至可以去掉 data-tooltip 属性，并将其放入 CSS 中的 content 属性中:

.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