Tooltip (Glossário Rápido)

O componente de tooltip é usado para fornecer definições ou explicações curtas para termos técnicos ao passar o mouse ou focar no elemento.

Exemplo Visual

Passe o mouse sobre o termo destacado para ver a definição:

Para iniciar o projeto, você precisa rodar o SSG Static Site Generator (Gerador de Site Estático), como o Eleventy, que compila o site em arquivos HTML, CSS e JS puros. e acessar o servidor local.

Como Utilizar

Código

{{ ui.tooltip(term="SSG", definition="Static Site Generator (Gerador de Site Estático).") }}

Parâmetros

• term (obrigatório): O texto que ficará visível e acionará o tooltip.
• definition (obrigatório): O conteúdo de texto que aparecerá dentro do tooltip.

Automação do Glossário

Este projeto inclui um script de automação que varre todos os arquivos .njk em busca do uso desta macro.

Como funciona?

• O script src/js/generate-glossary.js é executado antes do comando eleventy.
• Ele procura pelo padrão ui.tooltip(term="...", definition="...").
• Os termos encontrados são salvos em src/_data/glossary.json.
• A página de glossário lê esse arquivo JSON para renderizar a lista.