メインコンテンツへスキップ

Tooltip ツールチップ

マウスホバー時の通知情報を表示するによく使われます。

基本的な使い方​

方位とトリガー方式
import { LhButton, LhTooltip } from '@lh-ui/react'

export default function Demo() {
  return (
    <>
      <LhTooltip content="上方の通知" placement="top">
        <LhButton>上</LhButton>
      </LhTooltip>
      <LhTooltip content="クリックでトリガー" trigger="click">
        <LhButton>クリック</LhButton>
      </LhTooltip>
      <LhTooltip content="セマンティックカラーの通知" type="success">
        <LhButton>セマンティックカラー</LhButton>
      </LhTooltip>
    </>
  )
}

Tooltip Props​

プロパティ説明型使用可能な値デフォルト値
content通知の内容string——
placement表示位置LhTooltipPlacementtop / bottom / left / right（-start / -end を含む）'top'
triggerトリガー方式'hover' | 'click' | 'focus'—'hover'
disabled通知を無効化boolean—false
visible制御された表示状態boolean——
defaultVisible非制御のデフォルト表示boolean—false
showAfter / openDelay表示の遅延（ms。互いにエイリアス）number—0
hideAfter / closeDelay非表示の遅延（ms。互いにエイリアス）number—0
effectテーマ'dark' | 'light'—'dark'
typeセマンティックカラータイプ（effect の背景色を上書き）'primary' | 'success' | 'warning' | 'danger' | 'info'——
bgColorカスタム背景色（effect と type を上書き）string——
maxWidth最大幅string | number—'200px'
themeVarsコンポーネントレベルのテーマ変数Record<string, string>——
sxクイックレイアウトプロパティ（トリガーに作用）SxProps——

Tooltip イベント​

イベント説明コールバックシグネチャVue 対応
onVisibleChange表示状態の変化（制御・非制御どちらでも発火）(visible: boolean) => voidupdate:visible

ref​

forwardRef<HTMLDivElement> —— トリガーのルート要素です。LhTooltipInstance は show() / hide() / toggle() を公開します。

制御の簡素化

plus とは異なり、本ライブラリは**manual スイッチを持ちません**：visible を渡すと制御になり、onVisibleChange が外部に通知します。詳しくは移行ガイドを参照してください。

スクロール時に閉じる

トリガーがビューポートからスクロールアウトすると通知は自動的に閉じます（onScrollOut）。fixed のポップアップレイヤーがページの内容の上に浮いたままになるのを防ぎます。

スタイル​

import '@lh-ui/react/style/tooltip'