Skip to content

Tooltip ​

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

View Source 

Usage ​

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 ​

  • default 

Tokens ​

  • top
  • bottom
  • left
  • right

Installation ​

Follow instructions for individual framework usage below

  • winduum 
  • winduum-vue 
  • winduum-react 

Examples ​

Basic ​

html
<div class="c-tooltip bottom" aria-label="I am tooltip">
    <button class="ui-btn">Tooltip</button>
</div>

Released under the MIT License.