STooltip <s-tooltip>

Một nhãn ngắn xuất hiện khi hover hoặc focus vào một phần tử khác. STooltip là Vue 3 wrapper có type cho web component <s-tooltip> của Shopify Polaris.

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

Best practices

• Dùng tooltip cho chi tiết bổ sung, không thiết yếu. Chúng phù hợp với thông tin giúp hiểu rõ hơn nhưng không bắt buộc. Đừng bao giờ giấu lỗi, thông tin thiết yếu hoặc hướng dẫn bắt buộc trong tooltip.
• Kết hợp với nút chỉ có icon. Một nút icon cần tooltip để giải thích chức năng; hãy ghi rõ hành động và phím tắt của nó, nếu có.
• Giữ văn bản ngắn gọn. Một cụm từ hoặc một câu ngắn là lý tưởng. Nếu nội dung dài, có lẽ nó xứng đáng có một vị trí dễ thấy hơn trong UI.
• Coi việc có nhiều tooltip là dấu hiệu cảnh báo. Nếu giao diện cần nhiều tooltip mới dễ hiểu, hãy cải thiện nhãn, bố cục hoặc kiến trúc thông tin.
• Lưu ý thiết bị cảm ứng. Tooltip chỉ hoạt động trên desktop và không xuất hiện trên màn hình cảm ứng, nên hãy hiển thị thông tin quan trọng một cách mặc định trên mobile.

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

Xem best practices của Shopify cho <s-tooltip> (tiếng Anh) để có hướng dẫn đầy đủ.

Ví dụ

Hover hoặc focus vào nút bên dưới để hiện tooltip: tooltip được kích hoạt qua interestFor, không phải bằng cú nhấp.

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	Kiểu	Mô tả
id	string	Định danh duy nhất của phần tử.

Slots

Slot	Mô tả
default	Văn bản hoặc phần tử thông tin hiển thị bên trong overlay tooltip, cung cấp ngữ cảnh hoặc giải thích hữu ích khi người dùng tương tác với phần tử liên kết. Chỉ chấp nhận văn bản, component paragraph và textContent thô.