STooltip <s-tooltip>

Um rótulo curto que aparece quando outro elemento recebe o cursor ou o foco. STooltip é o wrapper de Vue 3 tipado do web component <s-tooltip> do Shopify Polaris.

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

Boas práticas

• Use tooltips para detalhes extras e não essenciais. Eles são adequados para informações que ajudam a entender, mas não são obrigatórias. Nunca esconda erros, informações essenciais ou instruções obrigatórias em um tooltip.
• Combine-os com botões só de ícone. Um botão de ícone precisa de um tooltip para explicar o que faz; inclua a ação e, se houver, o atalho de teclado correspondente.
• Mantenha o texto breve. Uma frase curta é o ideal. Se o conteúdo ficar longo, provavelmente ele merece um lugar mais visível na interface.
• Trate muitos tooltips como um sinal de alerta. Se a interface precisar de muitos deles para fazer sentido, melhore os rótulos, o layout ou a arquitetura da informação.
• Lembre-se dos dispositivos de toque. Tooltips só funcionam no desktop e não aparecem em telas sensíveis ao toque, então mostre as informações importantes por padrão no mobile.

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

Veja as boas práticas da Shopify para <s-tooltip> (em inglês) para todas as recomendações.

Exemplo

Passe o cursor sobre o botão abaixo ou dê foco a ele para exibir o tooltip: ele é ativado por interestFor, não por um clique.

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	Tipo	Descrição
id	string	Um identificador exclusivo para o elemento.

Slots

Slot	Descrição
default	O texto ou os elementos informativos exibidos dentro da sobreposição do tooltip, que oferecem contexto ou explicações úteis quando os usuários interagem com o elemento associado. Aceita apenas texto, componentes de parágrafo e textContent bruto.