CSS Houdini tooltip


NB : démonstration expérimentale. Fonctionne avec le moteur Blink (Chrome/Opera). Avec CSS Painting API Level 1, il est possible de dessiner des formes sans avoir recours à des tips et autres hacks CSS, comme avec l'exemple ci-dessous, une infobulle. Avant l'arrivée de cette API, pour créer une infobulle (tooltip) en CSS, il fallait passer par des pseudo-éléments, notamment pour faire apparaître le triangle.

CSS HOUDINI
CSS HOUDINI


<div class="infobulle">CSS HOUDINI</div>




.infobulle {

margin:2rem auto;
width: 200px;
height: 75px;
display: flex;
justify-content: center;
align-items: center;
background: #7A5FFF;
color: white;
border-bottom:1px solid transparent;
border-top:1px solid transparent;
border-image-source: paint(infobulle);
border-image-slice: 0 0 100% 0;
border-image-width: var(--taille-bordure);
border-image-outset: var(--taille-bordure);
--tooltip-position: 50%;
--tooltip-size: 20px;
--taille-bordure: 20px

}




CSS.paintWorklet.addModule('js.js');


⬇️ Télécharger le module js.js


👉 Source, inspiration, ressources :

Houdini & Polyfilling CSS🔗.

Infos sur GoogleChromeLabs🔗.

Source originale démonstration🔗.

Documentation W3C🔗.

Présentation slide🔗 par Serg Hospodarets.

Support navigateurs🔗.

Article sur le sujet🔗.

Animation Worklet API🔗.