STooltip <s-tooltip>

在另一个元素被悬停或聚焦时出现的简短提示。 STooltip 是 Shopify Polaris <s-tooltip> web component 的带类型 Vue 3 wrapper。

import { STooltip } from 'polaris-vue-elements'

最佳实践

• 将 tooltip 用于额外的、非必要的细节。 它适合那些有助于理解但并非必需的信息。绝不要将错误、必要信息或必须遵循的说明藏在 tooltip 中。
• 与仅图标按钮搭配使用。 图标按钮需要 tooltip 来说明其作用；请写明操作，如有键盘快捷键也一并注明。
• 保持文字简短。 一个简短的短语或句子最为理想。如果内容较长，它可能值得放在界面中更显眼的位置。
• 把大量 tooltip 视为警示信号。 如果界面需要大量 tooltip 才能让人理解，请改进标签、布局或信息架构。
• 别忘了触屏设备。 tooltip 只在桌面端有效，不会在触摸屏上显示，因此在移动端请默认显示重要信息。

<SButton icon="delete" accessibilityLabel="Delete product" interestFor="delete-tip" />
<STooltip id="delete-tip">Delete product</STooltip>

参阅 Shopify 关于 <s-tooltip> 的最佳实践（英文）以获取完整指南。

示例

将鼠标悬停在下方按钮上或使其获得焦点即可显示 tooltip：它通过 interestFor 触发，而不是点击。

Hover or focus meExtra context shown on hover or focus.

<script setup>
import { SButton, SText, STooltip } from 'polaris-vue-elements'
</script>

<template>
  <!-- interestFor activates the target on hover/focus, unlike commandFor which
       requires a click/activation. -->
  <SButton interestFor="example-tooltip">Hover or focus me</SButton>

  <STooltip id="example-tooltip">
    <SText>Extra context shown on hover or focus.</SText>
  </STooltip>
</template>

Props

Prop	类型	说明
id	string	元素的唯一标识符。

Slots

Slot	说明
default	工具提示浮层中显示的说明文本或元素，在用户与关联元素交互时提供有用的上下文或解释。只接受文本、段落组件和原始 textContent。