Tooltip 文字提示

文字提示组件，在鼠标悬停时显示提示信息。

基础用法

<button id="demo-tooltip">悬停显示提示</button>

<script>
  const tooltip = new SaTooltip('#demo-tooltip', {
    content: '这是提示信息'
  });
</script>

加载 SanoUI 组件中...

不同位置

通过 placement 配置提示框显示位置。

<button id="demo-tooltip-top">Top</button>
<button id="demo-tooltip-bottom">Bottom</button>
<button id="demo-tooltip-left">Left</button>
<button id="demo-tooltip-right">Right</button>

<script>
  new SaTooltip('#demo-tooltip-top', { content: '顶部提示', placement: 'top' });
  new SaTooltip('#demo-tooltip-bottom', { content: '底部提示', placement: 'bottom' });
  new SaTooltip('#demo-tooltip-left', { content: '左侧提示', placement: 'left' });
  new SaTooltip('#demo-tooltip-right', { content: '右侧提示', placement: 'right' });
</script>

加载 SanoUI 组件中...

不同效果

通过 effect 配置提示框样式。

<button id="demo-tooltip-dark">Dark 效果</button>
<button id="demo-tooltip-light">Light 效果</button>

<script>
  new SaTooltip('#demo-tooltip-dark', { content: 'Dark 提示', effect: 'dark' });
  new SaTooltip('#demo-tooltip-light', { content: 'Light 提示', effect: 'light' });
</script>

加载 SanoUI 组件中...

HTML 方式

通过 HTML 属性方式使用，更简洁。

<button data-tooltip="这是通过 data-tooltip 设置的提示">HTML 方式</button>

<script>
  SA.init('body');
</script>

加载 SanoUI 组件中...

API

构造函数参数

参数	说明	类型	默认值
container	容器选择器或元素	string | HTMLElement	-
options	配置选项	SaTooltipOptions	{}

配置选项

参数	说明	类型	可选值	默认值
content	提示内容	string	-	''
placement	显示位置	string	top / bottom / left / right / top-start / top-end / bottom-start / bottom-end / left-start / left-end / right-start / right-end	top
effect	主题样式	string	dark / light	dark
trigger	触发方式	string	hover / click / focus	hover
offset	偏移距离	number	-	12
disabled	是否禁用	boolean	-	false

方法

方法名	说明	参数	返回值
show	显示提示框	-	void
hide	隐藏提示框	-	void
updateContent	更新提示内容	content: string	void
setDisabled	设置禁用状态	disabled: boolean	void
destroy	销毁实例	-	void

自动初始化属性

属性	说明	类型	默认值
data-tooltip	提示内容（启用自动初始化）	string	-
data-content	提示内容（备用）	string	-
data-tooltip-placement	显示位置	string	top
data-tooltip-effect	主题样式	string	dark
data-tooltip-trigger	触发方式	string	hover

示例代码

手动创建实例

const tooltip = new SaTooltip('#my-button', {
  content: '这是提示信息',
  placement: 'top',
  effect: 'dark',
  trigger: 'hover'
});

// 显示提示框
tooltip.show();

// 隐藏提示框
tooltip.hide();

// 更新内容
tooltip.updateContent('新的提示信息');

自动初始化

<button data-tooltip="这是提示信息">按钮</button>
<button data-tooltip="底部提示" data-tooltip-placement="bottom">按钮</button>
<button data-tooltip="Light 效果" data-tooltip-effect="light">按钮</button>

<script>
  SA.init('body');
</script>

加载 SanoUI 组件中...

实际使用场景

场景 1：表单字段提示

在表单输入框上显示帮助提示。

<form class="sa-form" style="max-width: 500px;" data-label-position="right" data-label-width="100px">
  <div class="sa-form-item">
    <label class="sa-form-item__label">用户名</label>
    <div class="sa-form-item__content" style="display: flex; align-items: center; gap: 0.5rem;">
      <div class="sa-input" data-placeholder="请输入用户名" style="flex: 1;"></div>
      <span id="username-help" style="cursor: help; color: #909399;">?</span>
    </div>
  </div>
</form>

<script>
  SA.init('body');
  
  new SaTooltip('#username-help', {
    content: '用户名长度为3-20个字符，支持字母、数字和下划线',
    placement: 'right',
    effect: 'dark'
  });
</script>

加载 SanoUI 组件中...