Zapomnijmy o obiektowym JS, event-listenerach na 'mouseenter’ i 'mouseleave’, customowych komponentach z shadow-rootem albo zewnętrznych biblioteczkach – wykorzystując nowości CSS możemy sami napisać tooltip bardzo szybko.
Nasz HTML wygląda tak:
<p><span data-tooltip="Taki tekst pseudołaciński do testowania na stronach">Lorem ipsum</span>, dolor sit amet consectetur adipisicing elit. Temporibus sed in corrupti eius consectetur a molestiae quo praesentium, voluptate quam, aliquid labore magnam. Aliquid inventore cumque doloribus, quaerat dolorem qui!</p>Wokół elementu, który ma wyświetlać tooltip mamy <span>, który dodaje ’-tooltip’ do datasetu, gdzie wpisany jest nasz tekst. Teraz wystarczy odpowiedni CSS:
[data-tooltip]:hover::after {
display: block;
position: absolute;
content: attr(data-tooltip);
border: 1px solid black;
background: #eee;
padding: .25em;
}Ten kod łapie każdy element z 'data-tooltip’, na którym robimy hover i pokazuje naszego tooltipa. Dzięki funkcji 'attr’ jesteśmy w stanie dostać się do zawartości tekstowej i przekazać ją do 'content’ zaś reszta to już stylowanie według naszych upodobań.
Możemy jeszcze jakoś zaznaczyć elementy, które mogą tooltip wyświetlać. Złapmy każdy <span>, który to robi i dodajmy mu kropkowane podkreślenie:
span[data-tooltip]{
border-bottom: 1px dotted #000;
text-decoration: none;
}Łapiemy span, ponieważ nasze tooltipy możemy też wykorzystywać na innych elementach. To w zasadzie wszystko – tyle potrzeba aby uzyskać ten efekt w CSS.
