Html 如何获取鼠标悬停时出现的工具提示的css？

我正试图通过使用谷歌chrome开发者工具中的inspect元素来获得用于悬停工具提示的css。当我悬停在编辑铅笔图标上时，工具提示会出现。只要我移动鼠标查看工具提示，它就会消失。因此，我无法检查该工具提示。

如果要创建，请复制此代码

<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>

/*工具提示容器*/
.工具提示{
位置：相对位置；
显示：内联块；
边框底部：1px点黑色；/*如果您想在下方添加点
可悬停文本*/
}
/*工具提示文本*/
.tooltip.tooltiptext{
可见性：隐藏；
宽度：120px；
背景色：黑色；
颜色：#fff；
文本对齐：居中；
填充：5px0；
边界半径：6px；
/*定位工具提示文本-请参见下面的示例*/
位置：绝对位置；
z指数：1；
}
/*将鼠标悬停在工具提示容器上时显示工具提示文本*/
.tooltip:悬停.tooltiptext{
能见度：可见；
}
在我上空盘旋
提示文本

---

请参见使用控制台而不是元素检查器

在控制台中，写入：

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

控制台将向您显示该类的所有元素，当您单击结果时，该元素将聚焦，以便您可以查看其样式

---

它不是自定义Javascript或CSS工具提示插件。它是操作系统或浏览器的默认工具提示，使用

title

属性显示它，因此您无法获取或设置它的样式

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

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

<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>

.container{位置：相对；}
[数据切换=“工具提示”]：活动：在，
[数据切换=“工具提示”]：悬停：在，
[数据切换=“工具提示”]：焦点：之前
{内容：attr（title）；边框：1px纯黑色；背景：#eee；颜色：黑色；位置：绝对；顶部：-100%；填充：0.1em 0.3em；字体大小：更小；z索引：11；指针事件：无；空白：nowrap；}
…工具提示。。。

请详细说明@Anie solution。示例或任何有用的链接