Tooltip

Tooltip can be used for a little info hint on hover or focus.

It's a pure CSS visual hint — the text comes from the aria-label attribute and is rendered via the ::before pseudo-element. Placement is controlled with the tooltip-* tokens and appearance can be customized via the --x-tooltip-* props.

Do not rely on this pattern as an accessible description when aria-label is placed on a generic wrapper: its child trigger does not inherit that label, and the CSS hint cannot be dismissed with Escape. Prefer the Popover tooltip variant using the interestfor attribute.

View Source 

Installation

Follow instructions for individual framework usage below

• winduum 
• winduum-vue 
• winduum-react 

Styles

Variants

• default 

Props

• default 

Tokens

• tooltip-top
• tooltip-bottom
• tooltip-left
• tooltip-right

Examples

Basic

winduum

<div class="x-tooltip tooltip-bottom" aria-label="I am tooltip">
    <button class="x-button">Tooltip</button>
</div>

winduum-vue

<script setup>
    import { Tooltip } from '@/components/tooltip'
    import { Button } from '@/components/button'
</script>

<template>
    <Tooltip aria-label="I am a tooltip!">
        <Button>Tooltip</Button>
    </Tooltip>
</template>

winduum-react