XtfTooltip

组件说明

xtf-tooltip 是基于 xtf-popover 的轻量文字提示组件，适用于字段解释和按钮说明。支持方向、hover/click/manual 触发，以及自定义内容插槽；非 H5 的 hover 会由底层组件降级处理。

---

基础用法

1. 文本提示

<template>
  <xtf-tooltip content="这是订单金额"><xtf-button size="sm" label="金额说明" /></xtf-tooltip>
</template>
<script>
export default {}
</script>

2. 指定方向与点击触发

<template>
  <xtf-tooltip content="再次点击关闭" placement="top" trigger="click">
    <xtf-button size="sm" type="outline" label="点击提示"
  /></xtf-tooltip>
</template>
<script>
export default {}
</script>

3. 手动控制

<template>
  <view>
    <xtf-button label="切换提示" @click="show = !show" /><xtf-tooltip
      :show="show"
      trigger="manual"
      content="由业务状态控制"
      @update:show="changed"
      ><xtf-tag label="手动提示"
    /></xtf-tooltip>
  </view>
</template>
<script>
export default {
  data() {
    return { show: false }
  },
  methods: {
    changed(value) {
      this.show = value
      console.log('tooltip:', value)
    }
  }
}
</script>

4. 内容插槽

内容需要图文组合时使用 content 插槽。

<template>
  <xtf-tooltip trigger="click" placement="bottom" :arrow="false">
    <xtf-button label="查看规则" /><template #content
      ><view
        ><xtf-text color="inverse" text="退款将在 1-3 个工作日到账" /><xtf-tag
          size="xs"
          theme="warning"
          label="重要" /></view>
</template>
  </xtf-tooltip>
</template>
<script>
export default {}
</script>

---

全部属性

属性	类型	默认值	作用描述	适用范围
show	Boolean	false	可见状态，可用 v-model:show	manual 触发
trigger	String	'hover'	hover/click/manual 触发方式	选择交互方式
placement	String	'bottom'	提示方向	top/bottom/left/right
content	String	''	默认提示内容	简短纯文本
arrow	Boolean	true	是否显示箭头	自定义面板时
disabled	Boolean	false	禁用提示	不可用状态
closeOnClickOutside	Boolean	true	点击外部是否关闭	click/manual 模式
autoAdjust	Boolean	true	空间不足时自动调整方向	边缘锚点
offset	String | Number	12	与触发元素间距	微调位置
width	String | Number	''	面板固定宽度	固定信息卡
maxWidth	String | Number	320	面板最大宽度	长文案换行
zIndex	String | Number	40	面板层级	与弹层叠放
customClass	String	''	外层类名	局部定制
customStyle	String | Object	''	外层样式	局部定制
panelClass	String	''	浮层面板类名	面板视觉定制
panelStyle	String | Object	''	浮层面板样式	面板视觉定制
titleClass	String	''	标题区域类名，透传 xtf-popover	底层样式定制
titleStyle	String | Object	''	标题区域样式，透传 xtf-popover	底层样式定制
contentClass	String	''	内容区域类名	内容视觉定制
contentStyle	String | Object	''	内容区域样式	内容视觉定制
arrowClass	String	''	箭头类名	箭头视觉定制
arrowStyle	String | Object	''	箭头样式	箭头视觉定制

---

事件

事件名称	触发时机	回调参数	参数说明
update:show	底层 xtf-popover 显示状态变化时	(value: Boolean)	用于同步 show
open	底层 xtf-popover 打开时	()	事件由 xtf-popover 穿透
close	底层 xtf-popover 关闭时	()	事件由 xtf-popover 穿透

事件使用示例

<template>
  <xtf-tooltip
    :show="show"
    trigger="manual"
    content="同步事件"
    @update:show="show = $event"
    @open="log('open')"
    @close="log('close')"
    ><xtf-button label="提示" @click="show = !show"
  /></xtf-tooltip>
</template>
<script>
export default {
  data() {
    return { show: false }
  },
  methods: {
    log(name) {
      console.log('tooltip', name)
    }
  }
}
</script>

---

插槽

插槽名称	作用域参数	说明
默认插槽	-	触发提示的目标元素。
content	-	替换 content 属性，适合组合文本、标签等富内容。

---

主题说明

• 组件视觉由底层 xtf-popover 的 tooltip 变体提供，样式类可通过 panelClass、contentClass、arrowClass 覆盖。
• 面板尺寸由 width、maxWidth 控制，层级由 zIndex 控制。
• 在 xtf-config-provider 覆盖 popover 相关主题变量，或使用 panelStyle 为单个提示定制外观。