Tooltip - Y2 Docs

JS Component

Tooltip Y2Tool

Dicas flutuantes com HTML rico, posicionamento automático, delay e cores - ativadas por hover ou foco.

1. Básico - Passe o mouse

2. Cores

3. HTML Rico

Y2 Framework

4. Delay

5. Seguir o Mouse

6. API JavaScript

// Criar tooltip dinamicamente
Y2Tool.create(elemento, {
  text:    'Meu tooltip',
  pos:     'top',   // top | bot | lft | rgt
  color:   'pri',   // pri | suc | ale | err | lgt
  html:    false,
  delay:   200      // ms
});

// Destruir tooltip
Y2Tool.destroy(elemento);

// Atualizar texto
Y2Tool.update(elemento, 'Novo texto');

7. Acessibilidade (Foco)

Y2Tool exibe o tooltip tanto no hover quanto no foco do teclado, garantindo acessibilidade completa. O atributo aria-describedby é adicionado automaticamente.

Quick Reference

Atributo / Classe	Padrão	Descrição
`y2tool="texto"`	-	Ativa tooltip com esse texto
`y2tool-pos`	`top`	Posição: top \| bot \| lft \| rgt
`y2tool-clr`	dark	Cor: pri \| suc \| ale \| err \| lgt
`y2tool-html`	`false`	Permitir HTML no conteúdo
`y2tool-delay`	`200`	Delay em ms antes de aparecer
`y2tool-follow`	`false`	Tooltip segue o cursor do mouse
`Y2Tool.create(el, opts)`	-	Criar tooltip via JS
`Y2Tool.destroy(el)`	-	Remover tooltip
`Y2Tool.update(el, texto)`	-	Atualizar texto dinamicamente