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）。