STooltip <s-tooltip>

다른 요소에 마우스를 올리거나 포커스할 때 나타나는 짧은 라벨입니다. STooltip은(는) Shopify Polaris <s-tooltip> web component를 위한 타입이 지정된 Vue 3 wrapper입니다.

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

모범 사례

• tooltip은 부가적이고 필수적이지 않은 세부 정보에 사용하세요. 이해를 돕지만 꼭 필요하지는 않은 정보에 적합합니다. 오류, 필수 정보, 필수 안내는 절대 tooltip에 숨기지 마세요.
• 아이콘만 있는 버튼과 함께 사용하세요. 아이콘 버튼에는 기능을 설명하는 tooltip이 필요합니다. 액션과, 있다면 키보드 단축키를 함께 넣습니다.
• 텍스트를 짧게 유지하세요. 짧은 구절이나 한 문장이 이상적입니다. 내용이 길어진다면 UI에서 더 잘 보이는 자리에 둘 만한 내용일 가능성이 큽니다.
• tooltip이 많다면 경고 신호로 여기세요. 인터페이스를 이해하는 데 tooltip이 많이 필요하다면 대신 레이블, 레이아웃, 정보 구조를 개선합니다.
• 터치 기기를 기억하세요. tooltip은 데스크톱에서만 동작하고 터치 화면에서는 나타나지 않으므로, 모바일에서는 중요한 정보를 기본으로 표시합니다.

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

전체 가이드는 <s-tooltip>에 대한 Shopify 모범 사례(영어)를 참고하세요.

예시

아래 버튼에 마우스를 올리거나 포커스하면 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만 허용합니다.