This question explores CSS and addresses practical considerations related to: How can I create a CSS-only tooltip that appears on hover?

How can I create a CSS-only tooltip that appears on hover?

Ask any question about CSS here... and get an instant response.

Post this Question & Answer:

How can I create a CSS-only tooltip that appears on hover?

Asked on Apr 11, 2026

Answer

Previous Question Next Question

Creating a CSS-only tooltip involves using the `:hover` pseudo-class to display additional content when a user hovers over an element. Here's a simple example to illustrate this concept.

<!-- BEGIN COPY / PASTE -->
    <style>
      .tooltip {
        position: relative;
        display: inline-block;
        cursor: pointer;
      }

      .tooltip .tooltip-text {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 5px;
        padding: 5px;
        position: absolute;
        z-index: 1;
        bottom: 125%; /* Position above the text */
        left: 50%;
        margin-left: -60px;
        opacity: 0;
        transition: opacity 0.3s;
      }

      .tooltip:hover .tooltip-text {
        visibility: visible;
        opacity: 1;
      }
    </style>

    <div class="tooltip">Hover over me
      <span class="tooltip-text">Tooltip text</span>
    </div>
    <!-- END COPY / PASTE -->

Additional Comment:

The `.tooltip` class is used to wrap the element that will trigger the tooltip.
The `.tooltip-text` class contains the text to be displayed and is initially hidden.
Using `position: absolute` and `z-index`, the tooltip text is positioned above the trigger element.
The `:hover` pseudo-class changes the visibility and opacity to show the tooltip.
Transitions are used for a smooth fade-in effect.

✅ Answered with CSS best practices.

Ask any question about CSS here... and get an instant response.

How can I create a CSS-only tooltip that appears on hover?

Asked on Apr 11, 2026

Answer

Real Questions. Clear Answers.