lh-ui-plus

日本語

简体中文
English
繁體中文
한국어
Español
العربية
Français
Русский

日本語

简体中文
English
繁體中文
한국어
Español
العربية
Français
Русский

テーマ

API 风格：

Tooltip ツールチップ ​

マウスホバー時に追加情報を表示するテキストヒントコンポーネントです。

基本的な使い方 ​

基本的な使い方
vue
<script setup lang="ts">
import { LhTooltip, LhButton } from '@lh-ui/vue3'
</script>

<template>
  <!-- 基本的な使い方 -->
  <LhTooltip content="これはヒントメッセージです">
    <LhButton>ホバーでヒントを表示</LhButton>
  </LhTooltip>
</template>
vue
<script>
import { LhTooltip, LhButton } from '@lh-ui/vue3'

export default {
  components: { LhTooltip, LhButton },
}
</script>

<template>
  <!-- 基本的な使い方 -->
  <LhTooltip content="これはヒントメッセージです">
    <LhButton>ホバーでヒントを表示</LhButton>
  </LhTooltip>
</template>

各種位置 ​

各種位置
vue
<script setup lang="ts">
</script>

<template>
  <!-- 上 -->
  <LhTooltip content="上のヒント" placement="top">
    <LhButton>上</LhButton>
  </LhTooltip>
  <!-- 下 -->
  <LhTooltip content="下のヒント" placement="bottom">
    <LhButton>下</LhButton>
  </LhTooltip>
  <!-- 左 -->
  <LhTooltip content="左のヒント" placement="left">
    <LhButton>左</LhButton>
  </LhTooltip>
  <!-- 右 -->
  <LhTooltip content="右のヒント" placement="right">
    <LhButton>右</LhButton>
  </LhTooltip>
</template>
vue
<script>
export default {}
</script>

<template>
  <!-- 上 -->
  <LhTooltip content="上のヒント" placement="top">
    <LhButton>上</LhButton>
  </LhTooltip>
  <!-- 下 -->
  <LhTooltip content="下のヒント" placement="bottom">
    <LhButton>下</LhButton>
  </LhTooltip>
  <!-- 左 -->
  <LhTooltip content="左のヒント" placement="left">
    <LhButton>左</LhButton>
  </LhTooltip>
  <!-- 右 -->
  <LhTooltip content="右のヒント" placement="right">
    <LhButton>右</LhButton>
  </LhTooltip>
</template>

遅延のカスタマイズ ​

遅延のカスタマイズ
vue
<script setup lang="ts">
import { LhTooltip, LhButton } from '@lh-ui/vue3'
</script>

<template>
  <!-- 1 秒遅延して表示 -->
  <LhTooltip content="1 秒遅延して表示" :show-after="1000">
    <LhButton>遅延ヒント</LhButton>
  </LhTooltip>
  <!-- open-delay / close-delay -->
  <LhTooltip content="ホバーして 300ms 後に表示、離れて 500ms 後に非表示" :open-delay="300" :close-delay="500">
    <LhButton>open-delay / close-delay</LhButton>
  </LhTooltip>
</template>
vue
<script>
import { LhTooltip, LhButton } from '@lh-ui/vue3'

export default {
  components: { LhTooltip, LhButton },
}
</script>

<template>
  <!-- 1 秒遅延して表示 -->
  <LhTooltip content="1 秒遅延して表示" :show-after="1000">
    <LhButton>遅延ヒント</LhButton>
  </LhTooltip>
  <!-- open-delay / close-delay -->
  <LhTooltip content="ホバーして 300ms 後に表示、離れて 500ms 後に非表示" :open-delay="300" :close-delay="500">
    <LhButton>open-delay / close-delay</LhButton>
  </LhTooltip>
</template>

国際化 ​

ヒントのテキストは LhConfigProvider と組み合わせて言語パックを切り替えることで国際化できます。

国際化
vue
<script setup lang="ts">
import { ref } from 'vue'
import { LhConfigProvider, LhTooltip, LhButton } from '@lh-ui/vue3'
import { zhCN } from '@lh-ui/vue3'
import { enUS } from '@lh-ui/vue3'

const locale = ref('zh-CN')
</script>

<template>
  <!-- ConfigProvider で言語パックを切り替え -->
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <LhTooltip :content="locale === 'zh-CN' ? '中文提示' : 'English Tooltip'">
      <LhButton>Tooltip</LhButton>
    </LhTooltip>
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      {{ locale === 'zh-CN' ? '切换英文' : 'Switch to Chinese' }}
    </LhButton>
  </LhConfigProvider>
</template>
vue
<script>
import { LhConfigProvider, LhTooltip, LhButton } from '@lh-ui/vue3'
import { zhCN } from '@lh-ui/vue3'
import { enUS } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhTooltip, LhButton },
  data() {
    return {
      locale: 'zh-CN',
      zhCN: zhCN,
      enUS: enUS,
    }
  },
}
</script>

<template>
  <!-- ConfigProvider で言語パックを切り替え -->
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <LhTooltip :content="locale === 'zh-CN' ? '中文提示' : 'English Tooltip'">
      <LhButton>Tooltip</LhButton>
    </LhTooltip>
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      {{ locale === 'zh-CN' ? '切换英文' : 'Switch to Chinese' }}
    </LhButton>
  </LhConfigProvider>
</template>

sx クイックレイアウト ​

sx プロパティを使うと、追加の CSS を書かずにトリガーのルート要素の余白とサイズを手軽に調整できます。

sx の余白レイアウト
vue
<script setup lang="ts">
import { LhTooltip, LhButton } from '@lh-ui/vue3'
</script>

<template>
  <!-- sx の余白レイアウト -->
  <LhTooltip content="sx はトリガーのルート要素に適用されます" :sx="{ mt: 2, ml: 2 }">
    <LhButton type="primary">上余白 2、左余白 2</LhButton>
  </LhTooltip>
</template>
vue
<script>
import { LhTooltip, LhButton } from '@lh-ui/vue3'

export default {
  components: { LhTooltip, LhButton },
}
</script>

<template>
  <!-- sx の余白レイアウト -->
  <LhTooltip content="sx はトリガーのルート要素に適用されます" :sx="{ mt: 2, ml: 2 }">
    <LhButton type="primary">上余白 2、左余白 2</LhButton>
  </LhTooltip>
</template>

sx は 8px を基準とします：mt: 2 → marginTop: 16px、ml: 2 → marginLeft: 16px。完全なプロパティは sx クイックレイアウトを参照してください。

トリガー方式と状態 ​

trigger でトリガー方式を指定します；disabled でヒントを無効化します；manual と visible を組み合わせて手動で表示を制御します；hideAfter で遅延非表示を制御します。

トリガー方式と状態
vue
<script setup lang="ts">
import { ref } from 'vue'
import { LhTooltip, LhButton } from '@lh-ui/vue3'

const manualVisible = ref(false)
</script>

<template>
  <!-- クリックでトリガー -->
  <LhTooltip content="クリックでトリガー" trigger="click">
    <LhButton>クリックでトリガー</LhButton>
  </LhTooltip>
  <!-- フォーカスでトリガー -->
  <LhTooltip content="フォーカスでトリガー" trigger="focus">
    <LhButton>フォーカスでトリガー</LhButton>
  </LhTooltip>
  <!-- ヒントを無効化 -->
  <LhTooltip content="無効化されたヒント" disabled>
    <LhButton type="info" disabled>ヒントを無効化</LhButton>
  </LhTooltip>
  <!-- 手動制御 -->
  <LhTooltip content="手動制御" manual :visible="manualVisible">
    <LhButton @click="manualVisible = !manualVisible">手動切り替え</LhButton>
  </LhTooltip>
  <!-- 遅延非表示 -->
  <LhTooltip content="1 秒遅延して非表示" :hide-after="1000">
    <LhButton>遅延非表示</LhButton>
  </LhTooltip>
</template>
vue
<script>
import { LhTooltip, LhButton } from '@lh-ui/vue3'

export default {
  components: { LhTooltip, LhButton },
  data() {
    return {
      manualVisible: false,
    }
  },
}
</script>

<template>
  <!-- クリックでトリガー -->
  <LhTooltip content="クリックでトリガー" trigger="click">
    <LhButton>クリックでトリガー</LhButton>
  </LhTooltip>
  <!-- フォーカスでトリガー -->
  <LhTooltip content="フォーカスでトリガー" trigger="focus">
    <LhButton>フォーカスでトリガー</LhButton>
  </LhTooltip>
  <!-- ヒントを無効化 -->
  <LhTooltip content="無効化されたヒント" disabled>
    <LhButton type="info" disabled>ヒントを無効化</LhButton>
  </LhTooltip>
  <!-- 手動制御 -->
  <LhTooltip content="手動制御" manual :visible="manualVisible">
    <LhButton @click="manualVisible = !manualVisible">手動切り替え</LhButton>
  </LhTooltip>
  <!-- 遅延非表示 -->
  <LhTooltip content="1 秒遅延して非表示" :hide-after="1000">
    <LhButton>遅延非表示</LhButton>
  </LhTooltip>
</template>

openDelay / closeDelay はそれぞれ showAfter / hideAfter のエイリアスで、好みに応じて使い分けられます。

テーマと外観 ​

effect でダーク・ライトテーマを切り替え、bgColor で背景色をカスタマイズし、maxWidth で最大幅を制限し、teleportTarget でポップアップレイヤーのマウント先を指定します。

テーマと外観
vue
<script setup lang="ts">
import { LhTooltip, LhButton } from '@lh-ui/vue3'
</script>

<template>
  <!-- ダークテーマ -->
  <LhTooltip content="ダークテーマ" effect="dark">
    <LhButton>ダークテーマ</LhButton>
  </LhTooltip>
  <!-- ライトテーマ -->
  <LhTooltip content="ライトテーマ" effect="light">
    <LhButton>ライトテーマ</LhButton>
  </LhTooltip>
  <!-- カスタム背景色 -->
  <LhTooltip content="カスタム背景色" bg-color="#5a3fa8">
    <LhButton>カスタム背景色</LhButton>
  </LhTooltip>
  <!-- 最大幅 -->
  <LhTooltip content="このテキストは長めです。maxWidth により 160px に制限され、自動的に折り返して表示されます" :max-width="160">
    <LhButton>最大幅 160px</LhButton>
  </LhTooltip>
  <!-- カスタムマウント先 -->
  <LhTooltip content="#app にマウントされたポップアップ" teleport-target="#app">
    <LhButton>カスタムマウント先</LhButton>
  </LhTooltip>
</template>
vue
<script>
import { LhTooltip, LhButton } from '@lh-ui/vue3'

export default {
  components: { LhTooltip, LhButton },
}
</script>

<template>
  <!-- ダークテーマ -->
  <LhTooltip content="ダークテーマ" effect="dark">
    <LhButton>ダークテーマ</LhButton>
  </LhTooltip>
  <!-- ライトテーマ -->
  <LhTooltip content="ライトテーマ" effect="light">
    <LhButton>ライトテーマ</LhButton>
  </LhTooltip>
  <!-- カスタム背景色 -->
  <LhTooltip content="カスタム背景色" bg-color="#5a3fa8">
    <LhButton>カスタム背景色</LhButton>
  </LhTooltip>
  <!-- 最大幅 -->
  <LhTooltip content="このテキストは長めです。maxWidth により 160px に制限され、自動的に折り返して表示されます" :max-width="160">
    <LhButton>最大幅 160px</LhButton>
  </LhTooltip>
  <!-- カスタムマウント先 -->
  <LhTooltip content="#app にマウントされたポップアップ" teleport-target="#app">
    <LhButton>カスタムマウント先</LhButton>
  </LhTooltip>
</template>

Tooltip API ​

Props ​

プロパティ説明型デフォルト値
contentヒントの内容string''
placementヒントの位置"top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end"'top'
triggerトリガー方式"hover" | "click" | "focus"'hover'
disabled無効にするかどうかbooleanfalse
manual手動で表示を制御するかどうかbooleanfalse
visible手動制御の表示状態boolean—
showAfter表示の遅延時間（ms）number0
hideAfter非表示の遅延時間（ms）number0
openDelay表示の遅延時間（ms）、showAfter のエイリアスnumber—
closeDelay非表示の遅延number—
effectテーマ"dark" | "light"'dark'
type内蔵テーマ色タイプ（effect の背景色を上書きする）"primary" | "success" | "warning" | "danger" | "info"—
bgColorカスタム背景色（effect と type の背景色を上書きする）string—
maxWidth最大幅string | number'200px'
teleportTargetTeleport のマウント先（セレクターまたは要素、デフォルトは body）string | HTMLElement'body'
themeVarsコンポーネントレベルのテーマ変数。ConfigProvider の設定を上書きする{ [x: string]: string; }—
bgPatternコンポーネントレベルの背景紋様。ConfigProvider の設定を上書きするstring—
sxsx クイックレイアウトプロパティ（トリガーのルート要素に適用）LhSxProps—

注：trigger の 'click' 値は現時点では未実装です（挙動は 'hover' と同じ）。クリックによる切り替えは今後のバージョンで提供されます。

Slots ​

スロット名説明
defaultヒントをトリガーする要素（ヒントの本文は content プロパティで設定する）

Methods ​

ref を使ってコンポーネントが公開するメソッドを呼び出せます：

メソッド名説明
showヒントを直ちに表示する
hideヒントを直ちに非表示にする
toggleヒントの表示状態を切り替える

アクセシビリティ ​

  • ポップアップレイヤーは role="tooltip" を持ちます。表示時にトリガーのルートへ aria-describedby が自動的に設定されポップアップを指し、非表示時に自動的に削除されるため、宙に浮いた参照が残りません
  • キーボードで操作可能：hover / focus トリガー方式では、キーボードのフォーカスがトリガーに入る（focusin）とヒントも表示され、フォーカスが外れると自動的に非表示になります。これは WAI-ARIA APG の tooltip パターンに準拠しています；click トリガー方式はフォーカスに反応しません
  • トリガー内にはフォーカス可能な要素（ボタンやリンクなど）を配置してください。純粋なテキストはキーボードでフォーカスできず、キーボードユーザーに対してヒントが届かなくなります

型定義 ​

本コンポーネントが外部にエクスポートする TypeScript の型構造は以下の通りです（packages/components/tooltip/src/types.ts と @lh-ui/share/core/* のソースから自動抽出。各エントリーをクリックすると完全な定義を表示します。プロパティの説明は上記の Props 表を参照してください）：

LhTooltipPlacement
ts
/**
 * Tooltip の型
 */
export type LhTooltipPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'
LhTooltipTrigger
ts
export type LhTooltipTrigger = 'hover' | 'click' | 'focus'
LhTooltipEffect
ts
export type LhTooltipEffect = 'dark' | 'light'
LhTooltipType
ts
export type LhTooltipType = 'primary' | 'success' | 'warning' | 'danger' | 'info'
LhTooltipProps
ts
/**
 * Tooltip コンポーネントの Props
 */
export interface LhTooltipProps {
  /** ヒントのテキスト内容 */
  content?: string
  /** 表示位置 */
  placement?: LhTooltipPlacement
  /** トリガー方式 */
  trigger?: LhTooltipTrigger
  /** 無効にするかどうか */
  disabled?: boolean
  /** 手動で表示を制御するかどうか */
  manual?: boolean
  /** 手動制御の表示状態 */
  visible?: boolean
  /** 表示の遅延時間（ms） */
  showAfter?: number
  /** 非表示の遅延時間（ms） */
  hideAfter?: number
  /** 表示の遅延時間（ms）、showAfter のエイリアス */
  openDelay?: number
  /** 非表示の遅延 */
  closeDelay?: number
  /** テーマ */
  effect?: LhTooltipEffect
  /** 内蔵テーマ色タイプ（effect の背景色を上書きする） */
  type?: LhTooltipType
  /** カスタム背景色（effect と type の背景色を上書きする） */
  bgColor?: string
  /** 最大幅 */
  maxWidth?: string | number
  /** Teleport のマウント先（セレクターまたは要素、デフォルトは body） */
  teleportTarget?: string | HTMLElement
  /** コンポーネントレベルのテーマ変数。ConfigProvider の設定を上書きする */
  themeVars?: Record<string, string>
  /** コンポーネントレベルの背景紋様。ConfigProvider の設定を上書きする */
  bgPattern?: string
  /** sx クイックレイアウトプロパティ（トリガーのルート要素に適用） */
  sx?: LhSxProps
}

国風の美で、コードの基を築く

Copyright © 2024-2026 FengMo WenXue