html - 如何获取悬停时出现的工具提示的css？

Question

我正在尝试通过在谷歌浏览器开发人员工具中使用检查元素来获取用于悬停工具提示的 css。当我将鼠标悬停在编辑铅笔图标上时会出现工具提示。一旦我移动鼠标检查工具提示，它就会消失。所以我无法检查该工具提示。

<span> <span class="fa fa-pencil fa-1x" title="Edit" data-toggle="tooltip"></span> </span>

Answer 1

它不是自定义的 Javascript 或 CSS 工具提示插件。它是操作系统系统或浏览器默认的工具提示，使用title属性来显示它，因此您无法获取或设置它的样式。

顺便说一句，您可以使用@Anie 解决方案来使用您自己的工具提示。现在，您可以轻松地为工具提示设置自定义样式。

Answer 2

这正是你想看到的。

相反，您想创建请复制此代码。

<style>
/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the 
  hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

/* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
   visibility: visible;
}
</style>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

请参阅https://www.w3schools.com/css/css_tooltip.asp

Answer 3

使用控制台而不是元素检查器。

在控制台中，编写：

document.getElementsByClassName("fa fa-pencil fa-1x");

控制台将向您显示该类的所有元素，当您单击结果时，该元素将聚焦，因此您可以看到它的样式。

Answer 4

元素的位置（此处为“相对”）为生成的内容提供定位上下文。并且一个元素有它自己的标题属性，它提供了一个样式化和定位的伪元素的文本。请注意 tabindex 允许元素的焦点（悬停不是与内容交互的唯一方式）和禁用与伪/生成元素的交互。根据需要进行调整。

<style>
.container{position:relative;}
[data-toggle="tooltip"]:active:before,
[data-toggle="tooltip"]:hover:before,
[data-toggle="tooltip"]:focus:before
{content:attr(title);border:1px solid black;background:#eee;color:black;position:absolute;top:-100%;padding:0.1em 0.3em;font-size:smaller;z-index:11;pointer-events:none;white-space:nowrap;}
</style>
<span class=container>...<span tabindex="0" class="fa fa-pencil fa-1x" title="Edit" data-toggle="tooltip">tooltip</span>...</span>