在浏览器中重新创建默认工具提示

Question

在 Windows、Chrome 上

目标1：-

将鼠标悬停在元素上以显示工具提示，将其冻结并使用 Chrome 开发工具检查它以获取默认样式。

我尝试了什么？

尝试了这里的解决方案

检查 Chrome 中的悬停元素？

如何检查 JQuery UI 工具提示？

问题：-

所有列出的解决方案都不起作用。

1 - 按 F8 会使工具提示消失。 （在源选项卡中）

2 - 使用“事件侦听器断点”，““mouseout”方法不执行任何操作。

3 - 使用“调试器”或“控制台方法”不起作用，因为什么也没有发生。

目标 2：-

使用自定义样式重新创建太提示。

我尝试了什么？

尝试了这里的解决方案。

如何更改锚标记内标题属性的样式？

问题：-

1 - 显示默认工具提示和自定义工具提示。 （只需显示自定义工具提示即可）

.tooltip {
  position: relative;
}

.tooltip[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: -50px;
  left: 25px;
  color: red;
}

<span title="I am Tool Tip" class="tooltip">Hover over me</span>

Answer 1

你应该

aria-label

。这样您就可以同时涵盖辅助功能和自定义工具提示。

.tooltip {
  position: relative;
}

.tooltip:hover::after {
  content: attr(aria-label);
  position: absolute;
  bottom: -50px;
  left: 25px;
  color: red;
}

<span aria-label="I am Tool Tip" class="tooltip">Hover over me</span>