如何获得悬停时出现的工具提示的CSS？

Question

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

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

Answer 1

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

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

Answer 2

This is exactly what you want to see.

而你想创建请复制此代码。

$("option[value='test']").hide(); // here I assuming that you are not using ID

$("#idName option[value='test']").hide(); // here I assuming that you are using ID and replace `idName` with your IDs.

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

Answer 3

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

在控制台中，写下：

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

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

Answer 4

元素的位置（此处为“相对”）为生成的内容提供定位上下文。并且元素具有其自己的title属性，该属性提供样式化和定位的伪元素的文本。请注意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>