STooltip <s-tooltip>

Una etiqueta breve que aparece al pasar el cursor sobre otro elemento o al darle el foco. STooltip es el wrapper de Vue 3 tipado del web component <s-tooltip> de Shopify Polaris.

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

Buenas prácticas

• Usa los tooltips para detalles adicionales y no esenciales. Son adecuados para información que ayuda a comprender pero no es imprescindible. Nunca ocultes errores, información esencial ni instrucciones obligatorias en un tooltip.
• Combínalos con botones solo de icono. Un botón de icono necesita un tooltip que explique lo que hace; incluye la acción y, si existe, su atajo de teclado.
• Mantén el texto breve. Lo ideal es una frase corta. Si el contenido se alarga, probablemente merece un lugar más visible en la interfaz.
• Considera la abundancia de tooltips una señal de alerta. Si la interfaz necesita muchos para entenderse, mejora en su lugar las etiquetas, el diseño o la arquitectura de la información.
• Ten en cuenta los dispositivos táctiles. Los tooltips solo funcionan en escritorio y no aparecen en pantallas táctiles, así que muestra la información importante de forma predeterminada en móvil.

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

Consulta las buenas prácticas de Shopify para <s-tooltip> (en inglés) para ver todas las recomendaciones.

Ejemplo

Pasa el cursor sobre el botón de abajo o dale el foco para mostrar el tooltip: se activa mediante interestFor, no con un clic.

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	Descripción
id	string	Un identificador único para el elemento.

Slots

Slot	Descripción
default	El texto o los elementos informativos que se muestran dentro de la superposición del tooltip y que proporcionan contexto o explicaciones útiles cuando los usuarios interactúan con el elemento asociado. Solo acepta texto, componentes de párrafo y textContent sin formato.