工具提示行为
重要性: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 的人也可以添加带注释的元素。
附注:一次只能显示一个工具提示。