Interest Invokers API: tooltips e hover cards sem JavaScript

Tooltips, hover cards e menus que aparecem ao passar o mouse sempre exigiram uma combinação de mouseenter/mouseleave, focus/blur e, pra funcionar em touch, mais um tratamento separado pra toque longo. A Interest Invokers API resolve isso com um único atributo declarativo: interestfor, que conecta um elemento "gatilho" a um alvo que deve reagir quando o usuário demonstra interesse nele.

O jeito antigo

<button id="gatilho" aria-describedby="dica">Mais informações</button>
<div id="dica" class="dica-escondida" role="tooltip">Texto da dica</div>

const gatilho = document.getElementById('gatilho');
const dica = document.getElementById('dica');
let timer;

gatilho.addEventListener('mouseenter', () => {
    timer = setTimeout(() => dica.classList.add('visivel'), 400);
});
gatilho.addEventListener('mouseleave', () => {
    clearTimeout(timer);
    dica.classList.remove('visivel');
});
gatilho.addEventListener('focus', () => dica.classList.add('visivel'));
gatilho.addEventListener('blur', () => dica.classList.remove('visivel'));

Fora o código repetido em todo lugar que precisa de um hover card, ainda falta cobrir toque longo em telas touch e cuidar de acessibilidade manualmente.

Como funciona o atributo interestfor

Basta apontar interestfor para o id de um elemento com popover. O navegador mostra e esconde o popover automaticamente conforme o usuário passa o mouse, foca via teclado ou mantém o toque pressionado sobre o gatilho:

<button interestfor="dica">Mais informações</button>

<div id="dica" popover="hint">
    Texto da dica
</div>

Nenhum listener foi escrito — mostrar no hover/foco, esconder ao perder o interesse e responder a toque longo já vêm de fábrica.

Reagindo com os eventos interest e loseinterest

Para lógica que vai além de abrir um popover, o elemento alvo recebe os eventos interest e loseinterest, disparados com uma instância de InterestEvent:

const avatar = document.getElementById('cartao-usuario');

avatar.addEventListener('interest', (event) => {
    carregarPerfilDoUsuario(event.source.dataset.userId);
});

avatar.addEventListener('loseinterest', () => {
    cancelarRequisicaoPendente();
});

event.source aponta para o elemento gatilho que originou o interesse, o que é útil quando o mesmo cartão é reutilizado por vários gatilhos na página.

Estilizando o gatilho com :interest-source

Enquanto o interesse está ativo, o gatilho recebe o pseudo-classe :interest-source, permitindo destacar visualmente qual elemento disparou o popover atual:

button:interest-source {
    outline: 2px solid dodgerblue;
    outline-offset: 2px;
}

Controlando o tempo de espera

As propriedades CSS interest-delay-start e interest-delay-end ajustam o tempo de espera antes de mostrar e depois de esconder, sem precisar de setTimeout em JavaScript:

button {
    interest-delay-start: 0.4s;
    interest-delay-end: 0.2s;
}

Quando usar

Tooltips e dicas de contexto que hoje dependem de mouseenter/mouseleave manuais.
Hover cards de perfil, preview de link e cartões de produto que carregam conteúdo sob demanda.
Menus secundários que devem abrir só com intenção real de interação, evitando cliques acidentais.

Cuidados

O suporte ainda é restrito a navegadores baseados em Chromium — Firefox e Safari não implementam a API no momento, então é essencial tratar interestfor como um incremento progressivo, com o gatilho permanecendo acessível (por exemplo, um link normal com href) mesmo sem o popover de apoio. Em telas touch, o toque longo sobre um link nativo já abre o menu de contexto do navegador, então a API evita interceptar esse gesto em elementos <a>.

Compatibilidade

O atributo interestfor chegou ao Chrome e ao Edge na versão 142 (outubro de 2025). Ainda não há suporte no Firefox nem no Safari, então vale usar como aprimoramento progressivo sobre uma interação que já funcione sem a API.

caniuse

Conclusão

A Interest Invokers API traz para o HTML declarativo um padrão de interação — mostrar algo quando o usuário demonstra interesse — que até hoje exigia reimplementar a mesma lógica de hover, foco e toque longo em cada projeto. Combinada com a Popover API, ela cobre boa parte dos casos de tooltip e hover card sem depender de JavaScript para o comportamento básico.