Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij slevové akce 30% výuky zdarma!
Pouze tento týden sleva až 80 % na e-learning týkající se PHP
PHP týden

Lekce 9 - Animace efektů při interakci s elementy (tooltip)

V předchozí lekci, Animace zobrazování textu pomocí CSS3, jsme si ukázali, jak fungují animace elementů na stránce obecně, například jednoduchá změna barvy, pohybu a nebo velikosti.

Vítejte u další lekce ohledně animací v CSS3, ve které si ukážeme spíše efekty, než animace jako takové.

Co se v této lekci naučíme vytvořit:

Efekty hover & Tooltip
localhost

Pro zobrazení efektu je nutné najet kurzorem na text.

Hover effect

Základem pro dnešní lekci je tedy hover efekt. Ten se projeví, pokud kurzorem myši překryjeme určitý element na stránce. V praxi to znamená, že se určitému elementu (lze i jinému, než na který najedeme) změní vlastnosti elementu. Nastavíme ho pomocí pseudo-elementu :hover při nastavení třídy. Pokud máme tedy třídu .class01, hover jí nastavíme vytvořením nové, stejnojmenné třídy s pseudo-elementem .class01:hover. V kódu CSS to vypadá potom nějak takto:

.class01 {
 background-color: blue;
 color: red;
}

.class01:hover {
 background-color: red;
 color: blue;
}

HTML kód bude jednoduchý:

<div class="class01">
  Text co mění barvu.
</div>

Nyní, když najedeme kurzorem myši na element, prohodí se jeho barva pozadí a textu z modré na červenou:

Hover efekt
localhost
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Díky tomu potom můžeme vytvářet tzv. tooltipy (popisky či nápovědy).

Tooltipy

Tooltip je specifický efekt, kdy se při překrytí kurzorem myši zobrazí další element, většinou s dodatečnými informacemi. Mohou se zobrazovat kdekoliv, vedle textu, nad ním nebo pod ním. Mohou být také na úplně opačném konci stránky, což by ale trochu postrádalo smysl. Je mnoho způsobů, jak tyto okénka s textem vytvořit. Při vytváření by však měl člověk počítat s tím, jak může zobrazené okénko ovlivnit další elementy na stránce (posunutí atd.). Napíšeme tedy nějaký text a vybereme slovo, u kterého chceme zobrazit tooltip:

<p>Obyčejný Tooltip - <a class="tooltip">ZDE</a></p>

Zatím je to jen obyčejný text s odkazem:

Tooltip
localhost

Nyní mezi tagem <a></a> vložíme za slovo ZDE tag <span></span>, kterému přidáme třídu .classic a napíšeme do něj text, který chceme potom zobrazovat v okénku jako tooltip:

<p>Obyčejný Tooltip - <a class="tooltip">ZDE<span class="classic">Obyčejný rámeček bez efektů a barev.</span></a></p>

<span></span> je párový tag, zprvu používaný pro zvýraznění slov v textu. Funkčností je stejný jako <div> tag, pouze s tím rozdílem, že na stránce nezabírá celý blok, ale jenom jeho část, stejně velkou jako jsou rozměry textu.

CSS:

.classic {
    padding: 0.8em 1em;
    border: 1px solid black;
}

V třídě .classic jsme tedy nastavili vnitřní odsazení textu padding: 0.8em 1em;, aby byl co nejlépe čitelný, a okraj border: 1px solid black;, aby byly jasně vidět rozměry našeho tooltip okénka:

Tooltip
localhost

Nyní ho posuneme tam, kde chceme aby se zobrazoval:

.tooltip {
    color: black;
    outline: none;
    text-decoration: none;
    position: relative;
}

.tooltip span {
    border-radius: 5px 5px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
    position: absolute;
    left: 1em;
    top: 2em;
    z-index: 99;
    display: inline;
    width: 250px;
}

Nyní máme tedy toto:

Tooltip
localhost

Třída .tooltip slouží pouze pro estetickou úpravu textu. V našem případě je důležitá třída .tooltip span. Zde jsme nastavili, aby okraje byly zaoblené (border-radius: 5px 5px;), okénko mělo pod sebou iluzi stínu (box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);) a vždy se zobrazovalo nad/před ostatními elementy z pohledu pozorovatele pomocí z-index: 99;. Potom už jsme ho pouze posunuli pomocí vlastnosti left: 1em; doleva a vlastnosti top: 2em; dolů (pro to je potřeba nastavit také position: absolute;). Zobrazení display: inline; máme kvůli dalšímu kroku a šířka width: 250px; se často musí nastavit, jinak by nefungovalo posouvání elementu.

V tuto chvíli víme, jak to bude vypadat, když na slovo ZDE najede někdo kurzorem. To znamená, že třídu .tooltip span bude z pohledu CSS s pseudo-elementem :hover - .tooltip:hover span. Dále přidáme znovu třídu .tooltip span, v níž pouze napíšeme, aby se daný element nezobrazoval (display: none;):

.tooltip span {
    display:none;
    position: absolute;
}

.tooltip:hover span {
    border-radius: 5px 5px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
    position: absolute;
    left: 1em;
    top: 2em;
    z-index: 99;
    width: 250px;
    display: inline;
}

V prohlížeči budeme mít tooltip hotov:

Tooltip
localhost

Dále už je to všechno pouze o úpravě barev nebo tvaru. Pokud není něco jasné, všechny zobrazené ukázky si můžete stáhnout v příloze této lekce a svou chybu opravit :)

V další lekci, Průběhy animací elementů, si ukážeme, jak vypadají přednastavené průběhy animací v CSS a uděláme si i vlastní.


 

Měla jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 24x (6.16 kB)
Aplikace je včetně zdrojových kódů v jazyce CSS3

 

Předchozí článek
Animace zobrazování textu pomocí CSS3
Všechny články v sekci
CSS3 od A do Z
Článek pro vás napsal Filip Opluštil
Avatar
Jak se ti líbí článek?
1 hlasů
Aktivity (5)

 

 

Komentáře

Avatar
Yuriy Tretyachenko:19. února 20:10

Proč v .tooltip span {... position: absolute;} a .tooltip:hover span {... position: absolute;} se opakuji position: absolute? Funguje to i s jednym

 
Odpovědět
19. února 20:10
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Filip Opluštil
Redaktor
Avatar
Odpovídá na Yuriy Tretyachenko
Filip Opluštil:22. února 8:53

Pravda, v .tooltip span nemusí být position:absolute . Vzhledem k tomu že tam používáme display: none; tak není potřeba nastavovat pozici protože element na stránce v podstatě není. Zůstalo to tam kvůli rychlejšímu testování při psaní příkladu (aby člověk nemusel hledat kam má najet myší a stačilo mu obnovit stránku).

 
Odpovědět
22. února 8:53
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 2 zpráv z 2.