Tooltip ツールチップ

フォーカス可能な操作に短い説明を添えます。

基本的な使い方

インタラクティブプレビュー

Vue のソースを表示

Vue · TypeScript

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

<template>
  <AgmTooltip text="表示設定を初期値に戻す">
    <AgmButton variant="outline">初期値に戻す</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

プロパティ	型	デフォルト	説明
text	string	必須	ツールチップの内容
delay	number	250	ホバー時の遅延（ミリ秒）

スロット

• default：フォーカス可能な単一のトリガー要素

キーボード操作と利用上の注意

トリガーへのホバーまたはフォーカスで表示し、Escape で閉じます。タッチ操作で必要な情報はツールチップだけに置かず、直接表示してください。

インストール

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