我正在生成在字段级别(即姓名、出生日期、最喜欢的编程语言等)显示记录的 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 或任何其他库,我希望保持这种状态。
最佳答案
这是一个仅使用 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
关于javascript - 高效的 HTML 工具提示渲染(重用工具提示),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54259488/