Votre navigateur ne supporte pas cette démonstration.
Lorem ipsum dolor sit amet,
Tooltip avec @position-fallback.
L'info-bulle suit le lien de haut en bas lorsque vous montez/descendez la page.
consectetur adipiscing elit. Donec varius quam nisl, ac elementum tortor fringilla nec. Curabitur tellus ipsum, tempor ut faucibus in, imperdiet a tortor. Vivamus auctor egestas porta. Etiam lorem orci, volutpat eu tincidunt non, fermentum vel dui. Proin efficitur lectus a mauris hendrerit ullamcorper. Integer enim risus, consectetur eu risus sed, placerat scelerisque felis. Sed vehicula dignissim euismod. Fusce dignissim sed lectus vitae venenatis. Nam nec est nec purus iaculis lacinia. Maecenas faucibus, libero in dignissim
Simple tooltip qui reste collée en haut de l'ancre.
, magna augue convallis tortor, sed placerat orci nisl placerat velit. Sed sed ligula pharetra, blandit augue a, posuere nunc. Praesent urna mauris, convallis a mattis non, vulputate rutrum leo. Sed sollicitudin nibh sit amet augue imperdiet, ac elementum leo facilisis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec convallis, mauris eget faucibus mattis, lectus ipsum molestie nibh, sed dignissim orci dui et eros. Proin ligula nunc, auctor et viverra eget, dignissim eu purus.
<p>Lorem ipsum dolor sit amet, <button id="anchor-1" popovertarget="tooltip-1">cliquez ici</button>
<span id="tooltip-1" class="tooltip-1" anchor="anchor-1" popover>
Donec varius quam nisl, ac elementum tortor fringilla nec
</span>
consectetur adipiscing elit. Donec varius quam nisl, ac elementum tortor fringilla nec. Curabitur tellus ipsum, tempor ut faucibus in, imperdiet a tortor. Vivamus auctor egestas porta. Etiam lorem orci, volutpat eu tincidunt non, fermentum vel dui. Proin efficitur lectus a mauris hendrerit ullamcorper. Integer enim risus, consectetur eu risus sed, placerat scelerisque felis. Sed vehicula dignissim euismod. Fusce dignissim sed lectus vitae venenatis. Nam nec est nec purus iaculis lacinia. Maecenas faucibus, libero in dignissim
<button id="anchor-2" popovertarget="tooltip-2">cliquez ici</button>
<span id="tooltip-2" class="tooltip-2" anchor="anchor-2" popover>
<span>consectetur adipiscing elit. Donec varius quam nisl</span>
</span>, magna augue convallis tortor, sed placerat orci nisl placerat velit. Sed sed ligula pharetra, blandit augue a, posuere nunc. Praesent urna mauris, convallis a mattis non, vulputate rutrum leo. Sed sollicitudin nibh sit amet augue imperdiet, ac elementum leo facilisis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec convallis, mauris eget faucibus mattis, lectus ipsum molestie nibh, sed dignissim orci dui et eros. Proin ligula nunc, auctor et viverra eget, dignissim eu purus.
</p>
*,
*::before,
*::after{
box-sizing: border-box
}
@position-fallback --top-to-bottom {
@try {
bottom: anchor(top);
left: anchor(center);
}
@try {
top: anchor(bottom);
left: anchor(center);
}
}
.tooltip-1 {
position-fallback: --top-to-bottom;
translate: -50% 0;
background-color: #6753ea;
border-radius: 5px;
border:none;/*reset style navigateur*/
padding: 1rem 2rem; /*pour eviter overflow:auto*/
color: #fff;
text-align: center;
}
.tooltip-2 {
top: anchor(top);
left: anchor(center);
translate: -50% -100%;
/*reset style navigateur*/
border: none;
background: none;
overflow:visible
/*reset style navigateur*/
}
.tooltip-2 span {
position: relative;
display: block;
background-color: #6753ea;
border-radius: 5px;
padding: 1rem;
color: #fff;
text-align: center;
}
.tooltip-2 span::after {
content: "";
position: absolute;
bottom: -5px;
left: 50%;
translate:-50% 0;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #6753ea;
}