Tooltip

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

It's a pure CSS solution — the tooltip text comes from the aria-label attribute and is rendered via the ::before pseudo-element, so it stays accessible and needs no JavaScript. Placement is controlled with the tooltip-* tokens and appearance can be customized via the --x-tooltip-* props.

For complete accessibility, 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