Tooltip

Used to show a tooltip above or below some content when it's hovered over. Uses the ws-text attribute to determine what text to show.

Component Macros

$bottom
Makes the tooltip appear below the content instead of over it.

Preview

Preview Theme

Example

<div ws-x="[p.y 30px]">
    <ws-tooltip ws-x="[b.w 1px] [r 4px] [p 8px]" ws-text="Tooltip!">
        Tooltip over
    </ws-tooltip>

    <ws-tooltip ws-x="[$bottom] [b.w 1px] [r 4px] [p 8px]" ws-text="Tooltip!">
        Tooltip underneath
    </ws-tooltip>

    <ws-tooltip ws-text="Submit the form">
        <button ws-x="[$color @secondary] [$fill] [w 200px]">
            Submit
        </button>
    </ws-tooltip>
</div>