Gdzie wykorzystać ten przykład?
Objaśnienia przy polach i elementach interfejsu. Wariant „Podpowiedzi: ciemna podpowiedź” możesz dopasować do kolorów i treści swojej strony.
Jak działa ten efekt?
Warstwa z opisem jest pozycjonowana względem elementu. Stan hover lub focus decyduje o jej widoczności.
Jak dodać go na stronę?
- Otwórz przykład w edytorze i podmień tekst oraz kolory.
- HTML wstaw w miejscu, w którym ma pojawić się element.
- CSS przenieś do arkusza stylów swojej strony. Reguły
body z podglądu dopasuj do własnego układu. - Sprawdź działanie na telefonie, klawiaturą i z własną treścią.
Na co zwrócić uwagę?
Ważne instrukcje pokaż także bez najechania. Sprawdź, czy dymek nie wychodzi poza krawędź ekranu.
Co możesz zmienić w konfiguratorze?
Tekst przykładu, Kolor akcentu. W edytorze kodu możesz dodatkowo zmienić całą strukturę i zachowanie przykładu.
Gotowy kod: Podpowiedzi: ciemna podpowiedź
HTML
<div class="effect"><div class="tip-pack"><button type="button" aria-describedby="tooltip">Podpowiedzi ⓘ</button><span class="bubble" id="tooltip" role="tooltip">Dodatkowy kontekst we właściwym miejscu.</span></div></div>
CSS
*{box-sizing:border-box}body{margin:0;padding:35px 24px;background:#f4f5ef;color:#293322;font:15px/1.7 Arial,sans-serif;min-height:100vh;display:grid;place-items:center}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #738858;outline-offset:4px}h2,h3,p{margin-top:0}[hidden]{display:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.effect{width:100%;max-width:650px;color:#e95b30;text-align:center}.effect *{box-sizing:border-box}.effect button,.effect a{font:inherit}.effect button{cursor:pointer}.effect h2{font-size:clamp(25px,5vw,42px);line-height:1.2;margin:0 0 14px}.effect p{font-size:13px;color:#7c8c6d;margin:10px 0}.effect button:focus-visible,.effect a:focus-visible,.effect input:focus-visible{outline:3px solid #e95b30;outline-offset:5px}.tip-pack{position:relative;display:inline-block;margin:60px 0}.tip-pack button{padding:13px 20px;border:1px solid #d5e0c8;border-radius:6px;background:#fff;color:#e95b30;font-size:13px}.bubble{position:absolute;z-index:4;width:210px;background:#e95b30;color:white;padding:11px 15px;line-height:1.5;font-size:12px;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,margin .25s;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);background:#293923;color:#fff}.tip-pack:hover .bubble,.tip-pack:focus-within .bubble{opacity:1;visibility:visible;}.bubble small{opacity:.7;font-size:10px}@media(max-width:430px){.bubble{max-width:200px}}
@media(prefers-reduced-motion:reduce){.effect *,.effect *:before,.effect *:after{animation:none!important;transition:none!important}}