Tooltip

Adds a short explanation to a focusable control.

Basic usage

Live preview

View Vue source

Vue · TypeScript

<script setup lang="ts">
import { AgmButton, AgmTooltip } from 'augma'
</script>

<template>
  <AgmTooltip text="Restore the default display settings">
    <AgmButton variant="outline">Restore defaults</AgmButton>
  </AgmTooltip>
</template>

<style scoped>
.example-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.example-stack {
  display: grid;
  gap: 24px;
  width: 100%;
  max-width: 360px;
}
</style>

API

Prop	Type	Default	Description
text	string	Required	Tooltip text
delay	number	250	Hover delay (ms)

Slots

• default: a single focusable trigger element

Keyboard and usage notes

Shows when the trigger is hovered or focused; Escape dismisses it. On touch screens, show essential information directly instead of only in a tooltip.

Installation

import { AgmTooltip } from 'augma'
import 'augma/style.css'