W3.CSS — Tooltips

Basic Tooltip

<div class="w3-tooltip">
    Hover over me
    <span class="w3-text">Tooltip text</span>
</div>

Tooltip Styles

<!-- Default tooltip -->
<div class="w3-tooltip">
    Hover over me
    <span class="w3-text">Default tooltip</span>
</div>

<!-- Tooltip with background -->
<div class="w3-tooltip">
    Hover over me
    <span class="w3-text w3-padding w3-green w3-round">Styled tooltip</span>
</div>

<!-- Tooltip on button -->
<button class="w3-button w3-blue w3-tooltip">
    Button
    <span class="w3-text">Click me!</span>
</button>

Tooltip Positions

<!-- Top tooltip (default) -->
<div class="w3-tooltip">
    Top Tooltip
    <span class="w3-text">Tooltip on top</span>
</div>

Tooltip Examples

<!-- Tooltip on link -->
<a href="#" class="w3-tooltip">
    Link
    <span class="w3-text w3-padding w3-blue w3-round">Go to page</span>
</a>

<!-- Tooltip on icon -->
<i class="fa fa-info-circle w3-tooltip">
    <span class="w3-text w3-padding w3-black w3-round">Information</span>
</i>

<!-- Tooltip with rich content -->
<div class="w3-tooltip">
    <span class="w3-button w3-green">Hover for details</span>
    <div class="w3-text w3-padding w3-card-4" style="width:200px">
        <h4>Details</h4>
        <p>This tooltip contains rich content.</p>
    </div>
</div>

Tooltip on Images

<div class="w3-tooltip">
    <img src="image.jpg" alt="Image" style="width:100px">
    <span class="w3-text w3-padding w3-black w3-round">Image description</span>
</div>

Mini Practice

Create HTML code that:

1. Creates a basic tooltip
2. Adds a tooltip on a button
3. Creates a tooltip with styled background
4. Uses tooltip on an image

Up Next

Next: Learn about W3.CSS Accordions.