如何在悬停圆圈时在 HTML 中添加工具提示？

Question

我是 html 和 javascript 的新手，我正在尝试创建一个带有圆圈的 table，当您将鼠标悬停在圆圈上时，它会显示一个工具提示，里面有一个日期 (圆圈代表事件）我在 html 中使用了这段代码来创建圆圈：

<td><svg width='50' height='50'><circle cx='2' cy='2' r='2' fill='#ff8B45' /></svg></td>

谁能告诉我如何向圈子添加工具提示？

Answer 1

您可以在 <svg> 标签内添加一个 <title>Your text</title>。

<svg width='50' height='50'>
   <circle cx='20' cy='20' r='20' fill='#ff8B45'/>
   <title>11-10-2021</title>
</svg>

Answer 2

你可以这样做：

<td>
    <svg width='50' height='50'>
        <circle cx='2' cy='2' r='2' fill='#ff8B45'>
            <title>11/10/2021</title>
        </circle>
    </svg>
</td>

Answer 3

您还可以参考网络文档 link 了解工具提示和浏览器兼容性。

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title

如何在悬停圆圈时在 HTML 中添加工具提示？

How to add a tooltip in HTML when hovering a circle?

html

tooltip