ホバー上に表示されるツールチップのCSSを取得する方法は？

Question

Google Chromeの開発者ツールのinspect要素を使用して、ホバーのツールチップに使用するCSSを取得しようとしています。編集鉛筆アイコンにカーソルを合わせると、ツールチップが表示されます。ツールチップを点検するためにマウスを動かすとすぐに消えます。私はそのツールチップを調べることができません。あなたは、このコードをコピーしてください作成する代わりに

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

Answer 1

This is exactly what you want to see.

。

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

は要素インスペクタの代わりにコンソールを使用して参照してください。コンソールで

、書き込み：

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

コンソールはあなたにこのクラスを持つすべての要素が表示され、あなたが結果をクリックすると、要素はそうあなたはそれがスタイルだ見ることができます焦点を当てます。

Answer 3

これは、カスタムのJavaScriptやCSSのツールチッププラグインではありません。これは、OSシステムまたはブラウザのデフォルトのツールチップで、title属性を使用して表示するので、スタイルを取得または設定することはできません。

ところで、あなた自身のツールチップを使用するために@Anieソリューションを使用することができます。これで、ツールチップのカスタムスタイルを簡単に設定できます。

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>