Passez votre souris sur l'icône ci-dessous :
<button interestfor=menu id="menu-demo" popovertarget="liste-menu">
<svg height="0" width="0" viewBox="0 0 24 24" aria-hidden="true">
<path d="M6,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM16,6c0,1.1 0.9,2 2,2s2,-0.9 2,-2 -0.9,-2 -2,-2 -2,0.9 -2,2zM12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2z"/>
</svg>
</button>
<span popover="hint" id="menu">Menu</span>
<div id="liste-menu" popover="auto" anchor="menu-demo">
<ul role=menu>
<li>
<button interestfor=tooltip-1>
<svg width="0" height="0" viewBox="0 0 1920 1920" aria-hidden="true">
<path d="M960.16 0 28 932.16l79 78.777 853.16-853.16 853.16 853.16 78.889-78.777L960.16 0Zm613.693 1027.34v781.078h-334.86v-557.913h-557.8v557.912H346.445V1027.34H234.751V1920h1450.684v-892.66h-111.582Zm-446.33 334.748v446.441H792.775v-446.441h334.748ZM960.127 692.604c61.593 0 111.582 49.989 111.582 111.582 0 61.594-49.989 111.583-111.582 111.583-61.594 0-111.583-49.99-111.583-111.583 0-61.593 49.99-111.582 111.583-111.582Zm223.165 111.582c0-123.075-100.09-223.165-223.165-223.165-123.076 0-223.165 100.09-223.165 223.165 0 123.076 100.09 223.165 223.165 223.165 123.075 0 223.165-100.09 223.165-223.165" fill-rule="evenodd"/>
</svg>
Accueil
</button>
<span popover="hint" id="tooltip-1">Aller à l'accueil</span>
</li>
<li>
<button interestfor=tooltip-2>
<svg width="0" height="0" viewBox="0 -1.1 16 16" aria-hidden="true">
<path fill="currentcolor" d="M9.85,6.85l3.5-3.5a.49.49,0,0,0-.7-.7l-3.5,3.5A.53.53,0,0,0,9,6.3,2,2,0,0,0,8,6a2,2,0,1,0,2,2,2,2,0,0,0-.3-1A.53.53,0,0,0,9.85,6.85ZM8,9A1,1,0,1,1,9,8,1,1,0,0,1,8,9Zm8-1.31a8,8,0,0,1-2.3,6,.52.52,0,0,1-.71,0l-1.3-1.31a.49.49,0,0,1,.7-.7l.94.93A7,7,0,0,0,15,8H13.5a.5.5,0,0,1,0-1h1.42a7.23,7.23,0,0,0-.58-2,.5.5,0,1,1,.9-.42,7.83,7.83,0,0,1,.7,2.66.45.45,0,0,1,0,.41Zm-11.61,4a.48.48,0,0,1,0,.7l-1.3,1.31a.52.52,0,0,1-.71,0A8,8,0,0,1,0,8c0-.14,0-.27,0-.4a.44.44,0,0,1,0-.1.41.41,0,0,1,0-.16A7.95,7.95,0,0,1,7.91,0L8,0a.4.4,0,0,1,.15,0,7.84,7.84,0,0,1,3.23.73.49.49,0,0,1,.24.66.49.49,0,0,1-.66.24A7.12,7.12,0,0,0,8.5,1.05V2.5a.5.5,0,0,1-1,0V1a7,7,0,0,0-4.45,2,6.93,6.93,0,0,0-2,4H2.5a.5.5,0,0,1,0,1H1a6.92,6.92,0,0,0,1.71,4.58l.94-.93A.48.48,0,0,1,4.35,11.65Z"/>
</svg>Tableau de bord
</button>
<span popover="hint" id="tooltip-2">Accéder au tableau de bord</span></li>
<li>
<button interestfor=tooltip-3>
<svg width="0" height="0" viewBox="0 0 24 24" aria-hidden="true">
<g fill=none stroke="currentcolor">
<path d="M15.5777 3.38197L17.5777 4.43152C19.7294 5.56066 20.8052 6.12523 21.4026 7.13974C22 8.15425 22 9.41667 22 11.9415V12.0585C22 14.5833 22 15.8458 21.4026 16.8603C20.8052 17.8748 19.7294 18.4393 17.5777 19.5685L15.5777 20.618C13.8221 21.5393 12.9443 22 12 22C11.0557 22 10.1779 21.5393 8.42229 20.618L6.42229 19.5685C4.27063 18.4393 3.19479 17.8748 2.5974 16.8603C2 15.8458 2 14.5833 2 12.0585V11.9415C2 9.41667 2 8.15425 2.5974 7.13974C3.19479 6.12523 4.27063 5.56066 6.42229 4.43152L8.42229 3.38197C10.1779 2.46066 11.0557 2 12 2C12.9443 2 13.8221 2.46066 15.5777 3.38197Z" stroke-width="1.5" stroke-linecap="round"/>
<path d="M21 7.5L12 12M12 12L3 7.5M12 12V21.5" stroke-width="1.5" stroke-linecap="round"/>
</g>
</svg>Produits
</button>
<span popover="hint" id="tooltip-3">Voir les produits</span>
</li>
<li>
<button interestfor=tooltip-4>
<svg width="0" height="0" viewBox="0 -35.5 170 170" aria-hidden="true">
<path fill="currentcolor" d="M159.524 0.393145C156.399 0.123788 154.058 0.750571 152.37 2.30179C150.171 4.32164 149.108 7.85474 149.031 13.4077C147.212 15.4816 145.399 17.5445 143.593 19.5965C139.42 24.3401 135.106 29.2446 130.918 34.0834C126.73 38.9222 122.505 43.8811 118.419 48.6762C116.665 50.7333 114.91 52.7923 113.152 54.8533C112.677 54.843 112.182 54.8083 111.663 54.7723C110.128 54.5701 108.57 54.6493 107.064 55.0063C105.06 55.6145 103.869 55.0462 102.107 53.6307C92.4085 45.8476 83.3948 39.8002 74.55 35.1446C73.8555 34.8254 73.2439 34.3489 72.7624 33.752C72.2816 33.1552 71.9436 32.4542 71.7758 31.704C71.0743 29.0054 69.3499 26.6922 66.9731 25.2626C64.5969 23.833 61.7583 23.4013 59.0692 24.0605C56.3348 24.7041 53.9423 26.364 52.3692 28.7085C50.7961 31.0531 50.1584 33.9097 50.5836 36.7075C50.6933 37.4468 50.826 38.1861 50.9536 38.89L51.056 39.4685L15.5387 73.8969C15.3582 73.8795 15.1783 73.8596 14.9991 73.8409C14.4072 73.7767 13.7946 73.7124 13.1805 73.6963C7.30631 73.5259 3.69542 76.116 1.80964 81.8503C0.395138 86.151 1.94355 89.9895 3.23178 92.5031C4.10457 94.3089 5.43379 95.8517 7.0859 96.9748C8.73803 98.0985 10.6546 98.7639 12.6428 98.9034C12.843 98.9143 13.0427 98.9195 13.2422 98.9201C15.156 98.8912 17.0327 98.382 18.7028 97.4396C20.3728 96.4965 21.7836 95.1497 22.8082 93.5201C25.8693 88.8825 26.3451 84.5362 24.2534 80.2489L58.7173 47.1571L68.318 44.1679L96.7993 63.863C97.0238 68.0989 98.0703 71.2753 100.173 74.1232C101.397 75.8724 103.174 77.1517 105.213 77.7521C107.252 78.3519 109.432 78.2368 111.398 77.4262C117.081 75.2495 120.237 70.4261 120.088 64.1697L154.653 20.8963C159.556 21.8606 163.362 21.4107 165.969 19.5528C167.985 18.1186 169.212 15.895 169.615 12.9436C169.846 11.4554 169.772 9.93496 169.397 8.4767C169.022 7.01851 168.354 5.65349 167.434 4.46625C166.462 3.27794 165.259 2.30335 163.898 1.60274C162.538 0.902131 161.049 0.490445 159.524 0.393145Z"/>
</svg>Visites
</button>
<span popover="hint" id="tooltip-4">Consultez les visites</span>
</li>
<li>
<button interestfor=tooltip-5>
<svg width="0" height="0" viewBox="0 0 24 24" aria-hidden="true">
<g fill="currentcolor">
<path d="M1.25 15.25H22.75V16.75H1.25V15.25Z"/>
<path d="M1.25 8C1.25 5.37665 3.37665 3.25 6 3.25H18C20.6234 3.25 22.75 5.37665 22.75 8V18C22.75 20.6234 20.6234 22.75 18 22.75H6C3.37665 22.75 1.25 20.6234 1.25 18V8ZM6 4.75C4.20507 4.75 2.75 6.20507 2.75 8V18C2.75 19.7949 4.20507 21.25 6 21.25H18C19.7949 21.25 21.25 19.7949 21.25 18V8C21.25 6.20507 19.7949 4.75 18 4.75H6Z"/>
<path d="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V5.5C8.75 5.91421 8.41421 6.25 8 6.25C7.58579 6.25 7.25 5.91421 7.25 5.5V2C7.25 1.58579 7.58579 1.25 8 1.25Z"/>
<path d="M16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V5.5C16.75 5.91421 16.4142 6.25 16 6.25C15.5858 6.25 15.25 5.91421 15.25 5.5V2C15.25 1.58579 15.5858 1.25 16 1.25Z"/>
</g>
</svg>Évènements
</button>
<span popover="hint" id="tooltip-5">Voir les évènements</span>
</li>
<li>
<button interestfor=tooltip-6>
<svg width="0" height="0" viewBox="0 0 24 24" aria-hidden="true">
<g fill=none stroke="currentcolor">
<path d="M12 12H19M19 12L16 15M19 12L16 9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M19 6V5C19 3.89543 18.1046 3 17 3H7C5.89543 3 5 3.89543 5 5V19C5 20.1046 5.89543 21 7 21H17C18.1046 21 19 20.1046 19 19V18" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>
Se déconnecter
</button>
<span popover="hint" id="tooltip-6">Se déconnecter du compte</span>
</li>
</ul>
*,*::before,*::after{box-sizing: border-box}
button,ul,ul li{all:unset}
button{cursor:pointer;}
#menu-demo{
padding:.25lh;
height:3cap;
display:block
}
#menu-demo:is(:hover,:focus-visible){
background-color:#eee;
border-radius:1e3px
}
#menu-demo svg{
height:3cap;
width:3cap;
}
[popover] {
border: 0;
margin: 0;
border-radius: .25lh;
opacity: calc(1 - var(--pop));
position-area: var(--pa,span-right bottom);
}
[popover="hint"]{
padding:0 .25lh;
color: white;
background-color: black;
}
[popover="auto"]{
font-size: 1rem;
color: black;
padding: .5lh;
min-width: 20ch;
background-color: white;
box-shadow: 0 4px 8px 3px rgba(0,0,0,.15),0 1px 3px rgba(0,0,0,.3);
}
ul{
display: grid;
gap: .5lh;
}
li{
display: flex
}
li button{
flex:1;
display: flex;
align-items: center;
column-gap:.5lh;
padding:.25lh;
border-radius:.25lh;
}
li button svg{
height:1.5cap;
width:1.5cap;
flex:0 0 1.5cap;
}
ul li button:hover{
background-color:#eee
}
[id^=tooltip]{
--pa: span-right;
margin-left: 20ch
}
@starting-style {
[popover] {
--pop: 1;
}
}
@media(prefers-reduced-motion: no-preference) {
[popover] { transition: opacity .25s }
}
[interestfor] {
interest-show-delay: .1s;
interest-hide-delay: .1s;
}