如何将工具提示添加到span元素？
在下面的代码中，当用户hover跨度时，我想要一个工具提示，我该怎么做？ 我不想使用任何链接。
<span> text </span> 以下是简单的内置方式：
<span title="My tip">text</span>
这给你明文的工具提示。 如果你想要丰富的工具提示，格式化HTML，你需要使用一个库来做到这一点。 幸运的是， 有这些负载 。
用纯CSS自定义工具提示 – 不需要JavaScript：
示例（带有代码） / 全屏幕示例
作为默认title属性工具提示的替代方法，您可以使用:before创build自定义CSS工具提示:before / :after 伪元素和HTML5 data-*属性之后 。
使用提供的CSS，可以使用data-tooltip属性将工具提示添加到元素。
您还可以使用data-tooltip-position属性（接受的值： top / right / bottom / left ）来控制自定义工具data-tooltip-position 。
例如，下面将添加一个位于span元素底部的工具顶部。
<span data-tooltip="Custom tooltip text." data-tooltip-position="bottom">Custom bottom tooltip.</span>
这个怎么用？
您可以使用attr()函数检索自定义属性值，以显示伪元素的自定义工具提示。
[data-tooltip]:before { content: attr(data-tooltip); }
在定位工具提示方面，只需使用属性select器并根据属性的值更改位置。
示例（带有代码） / 全屏幕示例
在示例中使用完整的CSS – 根据您的需要进行定制。
[data-tooltip] { display: inline-block; position: relative; cursor: help; padding: 4px; } /* Tooltip styling */ [data-tooltip]:before { content: attr(data-tooltip); display: none; position: absolute; background: #000; color: #fff; padding: 4px 8px; font-size: 14px; line-height: 1.4; min-width: 100px; text-align: center; border-radius: 4px; } /* Dynamic horizontal centering */ [data-tooltip-position="top"]:before, [data-tooltip-position="bottom"]:before { left: 50%; -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); } /* Dynamic vertical centering */ [data-tooltip-position="right"]:before, [data-tooltip-position="left"]:before { top: 50%; -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); } [data-tooltip-position="top"]:before { bottom: 100%; margin-bottom: 6px; } [data-tooltip-position="right"]:before { left: 100%; margin-left: 6px; } [data-tooltip-position="bottom"]:before { top: 100%; margin-top: 6px; } [data-tooltip-position="left"]:before { right: 100%; margin-right: 6px; } /* Tooltip arrow styling/placement */ [data-tooltip]:after { content: ''; display: none; position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; } /* Dynamic horizontal centering for the tooltip */ [data-tooltip-position="top"]:after, [data-tooltip-position="bottom"]:after { left: 50%; margin-left: -6px; } /* Dynamic vertical centering for the tooltip */ [data-tooltip-position="right"]:after, [data-tooltip-position="left"]:after { top: 50%; margin-top: -6px; } [data-tooltip-position="top"]:after { bottom: 100%; border-width: 6px 6px 0; border-top-color: #000; } [data-tooltip-position="right"]:after { left: 100%; border-width: 6px 6px 6px 0; border-right-color: #000; } [data-tooltip-position="bottom"]:after { top: 100%; border-width: 0 6px 6px; border-bottom-color: #000; } [data-tooltip-position="left"]:after { right: 100%; border-width: 6px 0 6px 6px; border-left-color: #000; } /* Show the tooltip when hovering */ [data-tooltip]:hover:before, [data-tooltip]:hover:after { display: block; z-index: 50; }
在大多数浏览器中，title属性将作为工具提示来呈现，并且对于它将使用的元素通常是灵活的。
<span title="This will show as a tooltip">Mouse over for a tooltip!</span> <a href="http://www.stackoverflow.com" title="Link to stackoverflow.com">stackoverflow.com</a> <img src="something.png" alt="Something" title="Something">
所有这些将在大多数浏览器中呈现工具提示。
"title"属性将被用作浏览器的工具提示的文本，如果你想对其应用样式，可以考虑使用一些插件
对于基本的工具提示，你需要：
<span title="This is my tooltip"> Hover on me to see tooltip! </span>
