高效的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

​