CSS Houdini tooltip

🏠 Accueil blog » CSS » JavaScript

✔️ Support navigateurs :


<a class=houdini href="#">tooltip
<span class="infobulle">CSS HOUDINI</span>
</a>


.infobulle {
position:absolute;
transform:translatey(-130px);
left:calc(50% - 100px);
opacity:0;
visibility:hidden;
transition:transform .3s,opacity .3s linear;
color:white;
width:200px;
height:75px}
    
.houdini{position:relative}
    
.houdini:hover .infobulle {
display:inline-flex;
justify-content:center;
align-items:center;
transform:translatey(-115px);
opacity:1;
visibility:visible;
background-color:#7A5FFF;
background-clip:padding-box;
border-bottom:30px solid transparent;
border-image-source: paint(infobulle, #7A5FFF);
border-image-slice:0 0 60% 0}


(CSS.paintWorklet || 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