Skip to main content

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

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.