Tooltip

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

View Source 

Usage

css

@import "winduum/src/components/tooltip/index.css" layer(components);

html

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

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>

Variants

• default 

Tokens

• top
• bottom
• left
• right

Installation

Follow instructions for individual framework usage below

• winduum 
• winduum-vue 
• winduum-react 

Examples

Basic

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