Tooltip β
Tooltip can be used for a little info hint on hover or focus.
View SourceUsage β
css
@import "winduum/src/components/tooltip.css" layer(components);
html
<div class="c-tooltip bottom" aria-label="I am tooltip">
<button class="ui-btn">Tooltip</button>
</div>
vue
<script setup>
import { Tooltip } from '@/components/tooltip'
import { UiBtn } from '@/components/ui/btn'
</script>
<template>
<Tooltip aria-label="I am a tooltip!">
<UiBtn>Tooltip</UiBtn>
</Tooltip>
</template>
Variants β
Tokens β
top
bottom
left
right
Installation β
Follow instructions for individual framework usage below
Examples β
Basic β
html
<div class="c-tooltip bottom" aria-label="I am tooltip">
<button class="ui-btn">Tooltip</button>
</div>