Tooltip ツールチップ

ホバー / クリック / フォーカスでトリガーされるオーバーレイのヒントです。fixed 配置 + ビューポートでの反転（flip/shift）を備え、トリガーがビューポートから外れると自動的に閉じます。

ツールチップ

<template>
  <div class="demo-row" style="justify-content: center; padding: 56px 0 72px">
    <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>
    <LhTooltip content="クリックでトリガー" trigger="click">
      <LhButton type="primary">クリック</LhButton>
    </LhTooltip>
    <LhTooltip content="厳密に top で配置し、反転しない" placement="top" :flip="false">
      <LhButton>厳密な top</LhButton>
    </LhTooltip>
    <LhTooltip content="テーマ色のヒント" type="primary">
      <LhButton>テーマ色</LhButton>
    </LhTooltip>
  </div>
</template>

Props

プロパティ	説明	型	デフォルト値
content	ヒントの内容	string	''
placement	12 方位	'top' \| 'top-start' \| … \| 'right-end'	'top'
flip	主軸のスペースが不足したときに方向を反転。false を設定すると厳密に placement で配置	boolean	true
trigger	トリガー方式	'hover' \| 'click' \| 'focus'	'hover'
manual / visible	手動の制御モード	boolean	false / —
showAfter / hideAfter	表示 / 非表示の遅延（ms）	number	0
openDelay / closeDelay	表示 / 非表示の遅延のエイリアス（showAfter/hideAfter と同義、優先度はより低い）	number	—
effect	明色 / 暗色テーマ	'dark' \| 'light'	'dark'
type	内蔵のテーマ色（effect の背景を上書き）	'primary' \| 'success' \| …	—
bgColor	カスタム背景色（最優先）	string	—
maxWidth	最大幅	string \| number	'200px'
teleportTarget	オーバーレイレイヤーのマウント先（DOM の移動で実現）	string \| HTMLElement	'body'
disabled / themeVars / bgPattern / sx	—	—	—

Events

表示 / 非表示はトリガーのロジック内部で管理されます。

メソッド

manual モードではインスタンスメソッド show() / hide() / toggle() を使用します（defineExpose）。

ヒント

sx はトリガーのルート要素に作用します（popper は body にマウントされるため、sx は適用されません）。