回到课程

工具提示行为

重要程度: 5

编写工具提示(tooltip)行为的 JavaScript 代码。

当鼠标在带有 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 的元素中的所有 “over” 和 “out”,并从那里管理工具提示。

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

P.S. 一次只能显示一个工具提示。

打开一个任务沙箱。