Tooltip 文字提示

常用於展示滑鼠 hover 時的提示資訊。

基礎用法

方位與觸發方式

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	展示位置	LhTooltipPlacement	top / 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) => void	update:visible

ref

forwardRef<HTMLDivElement> —— 觸發器根元素。LhTooltipInstance 暴露 show() / hide() / toggle()。

受控簡化

與 plus 不同，本庫沒有 manual 開關：傳了 visible 就是受控，onVisibleChange 通知外部。詳見遷移指南。

捲動收起

觸發器捲出視區時提示自動收起（onScrollOut），避免 fixed 彈層浮在頁面內容之上。

樣式

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