html 附加信息 icon/button

Question

所以我想在我的网站上添加另一个功能。它是关于关键人物的。其中一些应该更详细地解释。我想把它做成单词旁边的一个小信息图标，应该解释一下。当您将鼠标悬停在该信息图标（或单击）上时，应会出现一个小弹出窗口，其中包含了解该关键数字含义所需的所有信息。类似下图pic here

我不知道如何搜索这样的教程或如何完全编程。有谁知道一个很好的 video/blog/how 来搜索这样的东西或者有一些代码？非常感谢你，最好的祝福，朱利安

Answer 1

如何搜索这样的教程或如何完整编程。

您描述的通常称为 工具提示，因此如果您想使用 javascript 实现它，请搜索 javascript 工具提示教程 或类似。

如果您想保持简单，您可以利用 HTML title 属性，例如

<span title="explanation">?</span>

将导致 ?，当鼠标悬停在上面时，将显示带有 explanation 的框。

Answer 2

我能给出的最基本的例子是 CSS :hover selector:

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .info{
            display: none;
        }
        .icon:hover ~ .info{
            display: block;
        }
    </style>
</head>

<body>
    <p>YourText.</p><div class="icon">!</div>
    <div class="info">Your information.</div>
</body>

</html>

这段代码中，只要鼠标移到“！”上面，就会显示信息class，显然可以把“！”去掉。以获得更好看的图标（我建议尝试使用 https://fontawesome.com/ 软件包之一），但基本思想在这里。

html 附加信息 icon/button

html additional information icon/button

html

javascript

css

popup

web