Dernière mise à jour : novembre 2022
Il est possible de mettre les termes que vous souhaitez derrière l'attribut data. (ex : data-blablabla, data-uhuhuh).
Le code :
<a href="" data-infobulle="Infobulle placée à gauche" data-position="gauche">
Lien hypertexte
</a>
<a href="" data-infobulle="Infobulle placée à droite" data-position="droite">
Lien hypertexte
</a>
<a href="" data-infobulle="Infobulle placée en haut" data-position="haut">
Lien hypertexte
</a>
<a href="" data-infobulle="Infobulle placée en bas" data-position="bas">
Lien hypertexte
</a>
*,*::before,*::after{box-sizing: border-box}
a[data-infobulle]{
margin: 2rem 0;
position: relative;
}
a[data-position]:before,
a[data-position]:after{
transform: translate3d(0,10px,0);
transition: transform .4s,opacity .4s;
position: absolute;
visibility: hidden;
opacity: 0
}
a[data-position]:before {
content: attr(data-infobulle);/*on se sert donc de l'attribut data dans le pseudo-element before pour creer l'infobulle*/
background-color: hsl(0,0%,0%);
color: #fff;
font-size: .875rem;
padding: 5px;
white-space: nowrap;
text-decoration: none;
}
a[data-position]:after {
width: 0;
height: 0;
border: 6px solid transparent;
content: ''
}
a[data-position]:hover:before,
a[data-position]:hover:after{
transform: initial;
visibility: visible;
opacity: 1
}
/* gauche */
a[data-infobulle][data-position="gauche"]:before {
top: 0;
right: calc(100% + 12px);
}
a[data-infobulle][data-position="gauche"]:after {
border-left-color: inherit;
border-right: none;
top: calc(50% - 3px);
right: calc(100% + 6px);
}
/* droite */
a[data-infobulle][data-position="droite"]:before {
top: 0;
left: calc(100% + 12px);
}
a[data-infobulle][data-position="droite"]:after {
border-right-color: inherit;
border-left: none;
top: calc(50% - 3px);
left: calc(100% + 6px);
}
/* haut */
a[data-infobulle][data-position="haut"]:before {
bottom: calc(100% + 10px);
left: 0;
}
a[data-infobulle][data-position="haut"]:after {
border-top-color: inherit;
border-bottom: none;
bottom: calc(100% + 4px);
left: 10px
}
/* bas */
a[data-infobulle][data-position="bas"]:before{
top: calc(100% + 10px);
left: 0;
}
a[data-infobulle][data-position="bas"]:after{
border-bottom-color: inherit;
border-top: none;
top: calc(100% + 4px);
left: 10px;
}