Volver a Components

Tooltip

<sg-tooltip> v0.1.1

Muestra informaci贸n contextual al hacer hover, click o focus sobre un elemento. Soporta m煤ltiples posiciones, variantes y modos de activaci贸n.

Ejemplos

B谩sico

Hover me
example.html 
<sg-tooltip content="This is a tooltip">
  <sg-button>Hover me</sg-button>
</sg-tooltip>

Posiciones

Top Bottom Left Right
example.html 
<sg-tooltip content="Top" position="top">...</sg-tooltip>
<sg-tooltip content="Bottom" position="bottom">...</sg-tooltip>
<sg-tooltip content="Left" position="left">...</sg-tooltip>
<sg-tooltip content="Right" position="right">...</sg-tooltip>

Variantes de color

Default Primary Success Warning Error
example.html 
<sg-tooltip variant="default" content="Default">...</sg-tooltip>
<sg-tooltip variant="primary" content="Primary">...</sg-tooltip>
<sg-tooltip variant="success" content="Success">...</sg-tooltip>
<sg-tooltip variant="warning" content="Warning">...</sg-tooltip>
<sg-tooltip variant="error" content="Error">...</sg-tooltip>

Trigger modes

Hover Click
example.html 
<sg-tooltip trigger="hover" content="Hover to show">...</sg-tooltip>
<sg-tooltip trigger="click" content="Click to toggle">...</sg-tooltip>
<sg-tooltip trigger="focus" content="Focus to show">...</sg-tooltip>

Sin flecha

With Arrow No Arrow
example.html 
<sg-tooltip content="No arrow tooltip" arrow={class="hl-keyword">false}>
  <sg-button>No Arrow</sg-button>
</sg-tooltip>

Contenido largo con max-width

Hover for long content
example.html 
<sg-tooltip
  content="This is a longer tooltip message that will wrap automatically when it exceeds the maximum width setting"
  max-width="200px">
  <sg-button>Long content</sg-button>
</sg-tooltip>

Con iconos

example.html 
<sg-tooltip content="Settings and preferences">
  <sg-icon name="cog" size="24" style="cursor: pointer;"></sg-icon>
</sg-tooltip>

Playground

Edita el c贸digo y ve los cambios en tiempo real:

HTML

API Reference

Propiedades

11
Prop Tipo Default Descripci贸n
content string undefined Texto del tooltip
position 'top' | 'bottom' | 'left' | 'right' 'top' Posici贸n del tooltip
trigger 'hover' | 'click' | 'focus' | 'manual' 'hover' Modo de activaci贸n
variant 'default' | 'primary' | 'success' | 'warning' | 'error' 'default' Variante de color
delay number 200 Delay en ms antes de mostrar
hide-delay number 100 Delay en ms antes de ocultar
arrow boolean true Muestra la flecha del tooltip
max-width string '250px' Ancho m谩ximo del tooltip
disabled boolean false Desactiva el tooltip
visible boolean false Control manual de visibilidad
interactive boolean false Permite interactuar con el contenido

Eventos

2
Evento Tipo Descripci贸n
sgShow CustomEvent<void> Emitido cuando el tooltip se muestra
sgHide CustomEvent<void> Emitido cuando el tooltip se oculta

Slots

1
Slot Descripci贸n
(default) Elemento que activa el tooltip

C贸mo usar

Control manual con JavaScript

manual-control.js 
const tooltip = document.querySelector('sg-tooltip');

// Control manual de visibilidad
tooltip.trigger = 'manual';
tooltip.visible = true;

// Escuchar eventos
tooltip.addEventListener('sgShow', () => {
  console.log('Tooltip shown');
});

tooltip.addEventListener('sgHide', () => {
  console.log('Tooltip hidden');
});

Tooltip interactivo

Usa interactive para permitir que el usuario interact煤e con el contenido del tooltip:

interactive.html 
<sg-tooltip
  content="<a href='/docs'>View docs</a>"
  interactive>
  <sg-button>Hover and click link</sg-button>
</sg-tooltip>

Accesibilidad

El tooltip autom谩ticamente agrega los atributos ARIA apropiados para accesibilidad. El contenido se anuncia a lectores de pantalla cuando se muestra.