Tooltip

A floating element that displays contextual information when a user hovers over or focuses on a control.
stableView sourceRadix ThemesReka UI
vue
<script setup lang="ts">
import PlusIcon from '~icons/ri/add-line'
import { Tooltip, IconButton } from '@typlog/ui'
</script>

<template>
  <div class="flex">
    <Tooltip content="Add to library">
      <IconButton radius="full">
        <PlusIcon />
      </IconButton>
    </Tooltip>
  </div>
</template>

API Reference ​

PropDefaultType
color"gray"
Color

Background color of the tooltip popup.

content
–
string

The content associated with the tooltip.

maxWidth"360px"
string

The max width of the tooltip popup.

Examples ​

By default, the tooltip has a black background in light mode and a white background in dark mode. You can customize the background color using the color prop.

Color ​

vue
<script setup lang="ts">
import PlusIcon from '~icons/ri/add-line'
import { Tooltip, IconButton } from '@typlog/ui'
</script>

<template>
  <div class="flex items-center gap-4">
    <Tooltip content="Add to library" color="indigo">
      <IconButton color="indigo" radius="full">
        <PlusIcon />
      </IconButton>
    </Tooltip>

    <Tooltip content="Add to library" color="violet">
      <IconButton color="violet" radius="full">
        <PlusIcon />
      </IconButton>
    </Tooltip>

    <Tooltip content="Add to library" color="crimson">
      <IconButton color="crimson" radius="full">
        <PlusIcon />
      </IconButton>
    </Tooltip>

    <Tooltip content="Add to library" color="amber">
      <IconButton color="amber" radius="full">
        <PlusIcon />
      </IconButton>
    </Tooltip>
  </div>
</template>