API Popover, para exibir “balões” apenas com HTML e CSS, chega a todos os navegadores web
O lançamento do Firefox 125, em meados de abril, trouxe uma boa notícia a desenvolvedores front-end (ou webdesigners, se você é das antigas): suporte ao atributo popover. Isso significa que, agora, os principais navegadores do mercado suportam pequenos balõezinhos direto no HTML, sem a necessidade de JavaScript.
[en] API Popover compatível com os principais navegadores
web.dev
Opa, vou dar uma olhadinha pra substituir o Littlefoot.
Se conseguir, me explica como faz? Adoraria remover o littlefoot aqui do Manual.
Ghedin, consegui. O problema é que pro alinhamento funcionar, só é possível usando âncoras. Essas âncoras não estão disponíveis ainda. No Windows só consegui testar habilitando a flag Experimental Web Platform features, e infelizmente só no Chrome (uma coisa que me deixa meio triste, pois foi o Firefox que jogou novas tecnologias pra frente quando o IE só atrasava os lados).
CSS:
#texto_pop {border: 1px solid #999;
margin: 3rem;
max-width: 25ch;
transform: translateX(-70%) translateY(-2.5rem);
transition: all 150ms ease-in-out;
top: calc(anchor(--popnovo bottom));
left: anchor(--popnovo center);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
HTML:
Texto simples para servir de teste para <button class="popover_button" style="anchor-name: --popnovo" popovertarget="texto_pop">•••</button><span id="texto_pop" popover>Texto do popover.</span> e ai continuar aqui.A nossa sorte é que o Littlefoot é bem pequeno (pleonasmo?).
Poxa, que pena. Aguardemos, então.
O littlefoot tem esse nome porque é uma versão mais leve, com JS “vanilla”, do bigfoot.js, um plugin para jQuery :)