LumoCSS | Lightweight CSS framework for semantic HTML

Content

Keyboard input

A CSS-only tooltip that appears on hover. Add the data-tooltip="Your text"attribute to any element.

Default

This text has a tooltip.

Left

Right

Bottom

<div style="width:100%;display:flex;flex-direction:column;align-items: center;">
    <p data-tooltip="This is the tooltip text.">
        This text has a tooltip.
    </p>
    <p data-tooltip="This is the tooltip text." class="placement-left">
        Left
    </p>
    <p data-tooltip="This is the tooltip text." class="placement-right">
        Right
    </p>
    <p data-tooltip="This is the tooltip text." class="placement-bottom">
        Bottom
    </p>
</div>

<button data-tooltip="Click this to submit the form!" class="placement-right" style="margin-top: 1rem;">Submit</button>