Wyskakująca chmurka z tekstem po najechaniu na obiekt, czyli tooltip (html + css)
To będzie szybki, prosty i ciekawy skrypt, jakim jest tooltip, tzw wyskakujące okienko z treścią. Pokazuje się ono po najechaniu na obiekt, np. na napis czy na przycisk – button. Można też dodać do obrazka czy jakiegokolwiek innego obiektu na stronie. Nie stosujemy tutaj JavaScript. Będzie tylko trochę kodu html i css. Lubię takie proste efekty, które zajmują mało kodu, przez co strona jest lżejsza i szybsza, a dodatkowo efektowna.
Nie przeciągam już struny 😀 I zabieramy się do roboty.
Dodajemy kod html
Wstawiamy ten prosty kod między <body></body>:
<div class="demo">
<p><a href="#" data-tooltip="Jestem wyskakującą chmurką z tekstem">Witaj. Najedź kursorem na tekst.</a></p>
</div>Kod tooltip dałam w <div>, bo ustawiłam sobie wygląd, wyśrodkowałam, dałam marginesy itp, by ładniej się prezentowało na środku strony. Oczywiście Wy sobie wstawicie tooltip w dowolny tekst na stronie. Wystarczy, że tekst dacie w znaczniki <p> oraz <a>. Przed tekstem należy dodać data-tooltip z opisem, który będzie wyskakiwał w chmurce.
Dodajemy kod css
W pliku styli css dodajemy kod:
header,
.demo,
.demo p,
.demo p a {
margin: 8em 0;
text-align: center;
text-decoration: none;
color: #000000;
font-size: 20px;
}
.demo p a:hover {
color: #db2b74;
}
/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
position: relative;
z-index: 2;
cursor: pointer;
}
/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
visibility: hidden;
opacity: 0;
pointer-events: none;
}
/* Position tooltip above the element */
[data-tooltip]:before {
position: absolute;
bottom: 150%;
left: 50%;
margin-bottom: 5px;
margin-left: -110px;
padding: 7px;
width: 210px;
border-radius: 3px;
background-color: #db2b74;
color: #fff;
content: attr(data-tooltip);
text-align: center;
font-size: 17px;
line-height: 1.2;
}
/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
position: absolute;
bottom: 150%;
left: 50%;
margin-left: -5px;
width: 0;
border-top: 5px solid #db2b74;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
content: " ";
font-size: 0;
line-height: 0;
}
/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
visibility: visible;
opacity: 1;
}
Kolory ustawiłam na różowe, ale sobie zmienicie, jak również rozmiar czcionki, font, odstępy. Przy podstawowej znajomości styli css, zapewne łatwo połapiecie się, że kolor tekstu zmienia się w color: #db2b74; a kolor tła w background-color: #db2b74;
Jeśli chcecie płynne pojawianie się i znikanie chmurki, to dodajcie ten kod:
transition-duration: 0.2s;
transition-timing-function: linear;do styli:
[data-tooltip]:before,
[data-tooltip]:after {Gotowe! Efekt można zobaczyć poniżej:
