How to get the css for tooltip which appears on hover?

html css chrome-dev-editor
Ganesh Devkate picture Ganesh Devkate · Aug 24, 2017 · Viewed 7k times · Source

I am trying to get css used for hover tooltip by using inspect element in google chrome developer tool.Tooltip appears when I hover on edit pencil Icon. as soon as I move the mouse to inspect the tooltip it disappears. so I am unable to inspect that tooltip. enter image description here

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

Answer

Argus Duong picture Argus Duong · Aug 24, 2017

It's not a custom Javascript or CSS tooltip plugin. It's a default tooltip by the OS system or the browser, using title attribute to display it, so you can't get or set it style.

By the way, you can use @Anie solution to use your own tooltip. Now you can easily set a custom style for your tooltip.

Related questions

How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More
How do I vertically center text with CSS?

I have a <div> element which contains text and I want to align the contents of this <div> vertically center. Here is my <div> style: #box { height: 170px; width: 270px; background: #000; font-size: 48px; color: #…

Read More
How to align a <div> to the middle (horizontally/width) of the page

I have a div tag with width set to 800 pixels. When the browser width is greater than 800 pixels, it shouldn't stretch the div, but it should bring it to the middle of the page.

Read More