返回课程

工具提示行为

重要性:5

为工具提示行为创建 JS 代码。

当鼠标移到具有 data-tooltip 属性的元素上时,工具提示应该出现在该元素上方,当鼠标移开时,工具提示应该隐藏。

带注释的 HTML 示例

<button data-tooltip="the tooltip is longer than the element">Short button</button>
<button data-tooltip="HTML<br>tooltip">One more button</button>

应该像这样工作

在这个任务中,我们假设所有具有 data-tooltip 属性的元素内部只有文本。没有嵌套标签(暂时)。

细节

  • 元素和工具提示之间的距离应为 5px
  • 如果可能,工具提示应该相对于元素居中。
  • 工具提示不应该超出窗口边缘。通常它应该在元素上方,但如果元素位于页面顶部并且没有空间放置工具提示,则应该在元素下方。
  • 工具提示内容在 data-tooltip 属性中给出。它可以是任意的 HTML。

这里你需要两个事件

  • mouseover 当指针移到元素上时触发。
  • mouseout 当指针离开元素时触发。

请使用事件委托:在 document 上设置两个处理程序来跟踪所有带有 data-tooltip 属性的元素的“移入”和“移出”事件,并从那里管理工具提示。

行为实现后,即使不熟悉 JavaScript 的人也可以添加带注释的元素。

附注:一次只能显示一个工具提示。

打开沙箱进行任务。