在为网站写下一组规则之后，我想给某些词一个定义。我的想法是，当一个人将鼠标悬停在一个单词上时，定义将弹出单词的下方或顶部，而单词本身周围的文本保持不变。
我看遍了所有地方，找不到合适的方法。我看过：https://www.w3schools.com/howto/howto_css_tooltip.asp
这与我想要实现的目标非常接近，但我似乎无法找到如何在我想悬停的单词的前面和之后获取文本，然后显示定义。
希望我在这里的措辞很清楚。
附带说明一下，只应该使用html，css和javascript。
例：
<p>Rule number 1: Please be respectful in our community.</p>
我希望将鼠标悬停在尊重一词上，该单词在其上方显示带有定义的文本。
已经有一个专门用于此的标签，如果您不介意将鼠标悬停在上面片刻，DEFINITION 标签或 。默认情况下，它会将文本设置为斜体，但您可以根据需要更改该样式。这将比仅仅使用span或div之类的东西在语义上更准确，但你做什么并不重要。这是元素上的title，它产生了魔力。
<p>Rule number 1: Please be <dfn title="don't be a jerk">respectful</dfn> in our community.</p>您可以在<span>元素上使用 title 属性（将鼠标悬停在 respectful 上一秒钟：
<p>Rule number 1: Please be <span title="feeling or showing deference and respect">respectful</span> in our community.</p>或者，您可以使用HTML5 <dfn>（定义）标记进行语义，尽管您仍然需要title属性：
<p>Rule number 1: Please be <dfn title="feeling or showing deference and respect">respectful</dfn> in our community.</p>