Introduction to CSS Tooltip
CSS Tooltip
A CSS tooltip is a small box that appears when the user hovers over an element on a webpage. The tooltip usually contains additional information about the element, such as a description or the purpose of the element.
To create a custom CSS tooltip, you can use the "::before"
or "::after"
pseudo-elements in CSS to create the tooltip box and position it relative to the element.
As an example:
Editor
Loading...
In this example:
- The
"tooltip"
class is applied to the element that will trigger the tooltip, and the"tooltip-text"
class is applied to the tooltip box. - The tooltip box is initially hidden with the
"visibility"
and"opacity"
properties, and is positioned relative to the element using the"position"
,"top"
,"left"
, and"margin-left"
properties. - When the user hovers over the element, the tooltip box becomes visible and opaque with the
"visibility"
and"opacity"
properties set to"visible"
and"1"
, respectively.