HTML 工具提示仅使用 div/span/etc。属性（鼠标上.../style/etc。）

Question

我使用的网站有一个富文本框，可以直接访问底层 HTML 代码。我可以编辑 HTML 代码，但是当我保存它时，网站会介入。 <style> 元素消失了，但 <div> 和 <span> 元素仍然存在并且似乎保留了它们的所有属性。

我想要某个 <span> 元素在悬停时显示工具提示。我考虑过使用 title 属性（它有效），但它不够灵活，无法满足我的需要。

是否可以（以及如何）在没有 <style> 元素的情况下仅使用 <div> 和 <span> 元素的属性来实现工具提示 like shown here？我在考虑诸如 style、onmouseover 和 onmouseout 之类的属性，但请随意建议您认为合适的其他属性。

Answer 1

有了这个，您可以向任何元素添加 hovertip 属性，例如 <p hovertip="tip">hover this</p>。

var tooltip = document.getElementById("tooltip");
document.addEventListener("mousemove", (e) => {
    elementMouseIsOver = document.elementFromPoint(e.clientX, e.clientY);
    if (elementMouseIsOver !== null) {
        if (elementMouseIsOver.getAttribute("hovertip") == null) {
            tooltip.style.display = "none";
            tooltip.innerText = "";
        } else {
            tooltip.style.display = "block";
            tooltip.innerText = elementMouseIsOver.getAttribute("hovertip");
        };
    };
    tooltip.style.top = e.clientY + "px";
        tooltip.style.left = e.clientX + "px";
});

#tooltip {
    border-radius: 5px;
    padding: 5px;
    background-color: darkslategray;
    opacity: 0.9;
    color: white;
    position: fixed;
    left: 0px;
    top: 0px;
    display: none;
    pointer-events: none;
}

<div id="tooltip"></div>
<textarea hovertip="asdb"></textarea><br>
<p>wqe qwej jiofdas jare oias. dgf <span hovertip="the tooltip" style="text-decoration: underline;">gfrsd</span> sfgd ho, sfdg sdfr ert asd.</p>

Answer 2

所以假设你没有办法在页面加载时包含单独的 css 或 js 我想出了一些只适用于 html:

的东西

<!DOCTYPE html>
<html>
<body style="text-align:center;">

<h2>Top Tooltip w/ Bottom Arrow</h2>

<div style="position: relative;
display: inline-block;
border-bottom: 1px dotted black;" 
onmouseover="tooltip.style.visibility='visible'" 
onmouseout="tooltip.style.visibility='hidden'">Hover over me
<span id="tooltip" style="visibility: hidden;">
    <span style="width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -60px;">Tooltip text</span>
    <span style="content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;"></span>
</span>

</div>

HTML 工具提示仅使用 div/span/etc。属性（鼠标上.../style/etc。）

HTML tooltip using only div/span/etc. attributes (onmouse.../style/etc.)

html

javascript

css

attributes