javascript - 当用户将鼠标悬停在 标签内的文本上时，如何弹出工具提示？

Question

好的，我有一个自定义 <ins>标记如下:

ins{
    color:blue; 
    font-weight:500;
    text-decoration:none;
}

ins:hover{
    cursor: pointer;
    cursor: hand;
    text-decoration:underline;
}

我希望当用户将鼠标悬停在 <ins> 中的文本上时标签，然后会弹出一个小工具提示“这是插入的文本”。

所以，基本上，我们应该修改 ins:hover像下面这样:

ins:hover{
    cursor: pointer;
    cursor: hand;
    text-decoration:underline;
    tooltip:"This is inserted text";
}

我们能实现这样的目标吗？

如果我们不能那样做，那么

有没有符合我要求的弹出工具提示的html基本标签？

注意:基本标签是指无需任何属性即可工作的任何标签。出于安全原因，我不能在基本 html 标记中使用任何属性。

Answer 1

我创建了一个 tooltip demo它使用 jquery 来显示工具提示。这可能是适合您的解决方案。

它使用一个 div 容器来存储单独的工具提示，当用户将鼠标悬停在触发点上时，这些工具提示会显示/显示和定位。每个触发器都通过指定工具提示 ID 链接到单独的工具提示。工具提示的定位基于鼠标光标位置和触发点相对于窗口的位置(如果窗口已向下滚动)。

希望有用

CSS 解决方案可能会使用 content: 规则。或许还可以使用 :before 或 :after 选择器。

ins:hover::after{content:"tooltip text"};

但是，当在整个站点中多次使用时，这种方法可能会变得非常麻烦。