Popisek s CSS: podrobné pokyny a metody odebrání

Hlavní výhody nápovědy na HTML: snadné použití a schopnost používat s jakýmikoliv prvky rozložení - od textu po obrázky. Má ale také velké nedostatky:

• text nelze formátovat;
• příliš jednoduchý vzhled, který nelze změnit;
• žádná možnost vkládání obrázků.

Atribut HTML je vhodný pouze pro malé tipy, které nevyžadují speciální design. V jiných případech je užitečné vědět, jak vytvořit tipy s CSS.

CSS-tooltip

Můžete vytvořit krásný vlastní blok nápovědy pomocí kaskádových stylových listů. Používají se základní pojmy CSS:

• Absolutní polohování - vytahování informací z obecného toku dokumentu;
• úplné skrytí bloku v neaktivním stavu pomocí vlastnictví zobrazení;
• pseudo : vznášejte sekterý je přiřazen k libovolnému prvku pod kurzor myši;
• pseudo-prvky : předtím a : pokteré můžete použít pro jednoduché výzvy, abyste nevytvořili samostatný prvek HTML;
• animace a hladká změna vlastností pro krásné účinky vzhledu a zmizení.

Všechny tyto vlastnosti jsou dobře podporovány moderními prohlížeči, což zajišťuje spolehlivé fungování mechanismu nástroje.

Pseudotřídní : vznášejte se, navíc k pohybu kurzoru, reaguje také na dotyk prstu na dotykové obrazovce, což vám umožní podporovat mobilní gadgety.

Blok nebo pseudo-element

CSS-tooltip může být buď samostatný blok HTML s vlastní strukturou, nebo pseudo-element jiného bloku. Každá z těchto možností má své klady i zápory, které je třeba vzít v úvahu.

Uvnitř samostatného kontejneru je mnohem jednodušší manipulovat s obsahem. Můžete do něj umístit obrázky, tituly a další prvky.

Pseudo-element vám umožní zbavit se zbytečnýchblokuje a usnadňuje uspořádání. Textový obsah může být umístěn v atributu cílového prvku a nestará se o vytvoření samotného náznaku, všechno se provede CSS. Nicméně, pseudo-element není vhodný pro blok se složitou strukturou. Kromě toho může být vytvořen pouze pro závěrečné značky. Tuto poznámku nelze připojit přímo k obrázku.

Vytváření vyskakovacího bloku v CSS

Vytvoření krásně navrženého tooltip se složitou strukturou pro nejbližší hvězdu ze souhvězdí Centaurus.

Nejdříve definujeme značku HTML:

 Hvězdy souhvězdí Centauri 

 Alfa Centauri 
 Beta Centauri 
 Theta Centauri Theta 
 Centauri Scale 
 Epsilon Centauri 

Proxima Centauri


Proxima Centauri (od latiny proxima - nejbližší) je červený trpaslík příbuzný hvězdnému systému Alpha Centauri, nejbližší hvězda na Zemi po Slunci.

Vytvoření a skrytí bloku tipů pomocí CSS:

.star {
pozice:relativní;
}}

/ * styly pro nápovědu * /
.star .tooltip {
displej: žádný;
poloha: absolutní;
vrchol: 50%;
transformace: translateY (-50%);
vlevo: 100%;
}}

/ * styly pro dekorativní trojúhelník * /
.star .tooltip: před {...}

/ * hover prompt * /
.star: hover .tooltip {zobrazení: blok; }}

Styly seznamu a samotná výzva mohou být libovolné, neboť kvůli krátkosti jsou vynechány.

Umístění popisku v samostatném bloku umožňuje použít obrázky uvnitř, formátovat text a dokonce vytvářet pseudo-prvky pro krásný design.

Nápověda v pseudo-prvku

Proveďte vytvoření popiskuV pseudo-prvku vám pomůže panel grafického editoru. Každý nástroj je prezentován ve formě ikony, jejíž účel může být pro nezkušeného uživatele nepochopitelný. Chcete-li zajistit, aby nikdo nebyl s ikonami spokojen, měli byste přidat názvy s názvy.

HTML panelu vypadá takto:

Jediný název nástroje je umístěn v atributu data-tooltip. Uvnitř bloku je ikona, ale popiska v samotném kódu HTML chybí.

Vzhledem k tomu, že nápověda bude obsahovat pouze krátký vysvětlující text, můžete použít pseudo-prvky, abyste zabránili tomu, aby se panel lehký.

/ * běžné styly ikon * /
.nástroj {
poloha: relativní;

barva: # 666;
pozadí: bílá;

kurzor: ukazatel;
}}

/ * styly pro ikonu při vznášení se vznášedlem * /
.instrument: hover {
pozadí: # 666;
barva: bílá;
}}

/ * styly pro rady * /
.instrument: vznášejte se: po {
obsah: attr (data-tooltip);
poloha: absolutní;
vlevo: 100%;

barva: # 666;
}}

Pseudo-prvek se objeví pouze při pohybu kurzoru, takže není potřeba skrýt ho s blokem zobrazení. Jeho poloha je regulována vlastnostmi pozice a vlevo / vpravo / nahoru / dolů. Načíst z atributu data-tooltip Cílový obsahový element obsahu CSS poskytuje funkci attr (). Dekorativní styly jsou vynechány kvůli stručnosti.

Vzhled klíčů při kliknutí bez skriptů

Předtím diskutované mechanismy nástrojů reagovaly na podržení kurzoru myši na cílovém prvku a na základě pseudo-třídy CSS : vznášejte se. V některých situacích je vhodnější otevřít nápovědu po kliknutí. Podobný efekt lze snadno implementovat do JavaScriptu, ale CSS to dokáže.

Mezi seznamem pseudotříd CSS je nádherná třída : focusK dispozici pro odkazy a vstupní prvky. Na rozdíl od : vznášejte se, который исчезает сразу же, как уходит курсор myš, tato pseudotřída umožňuje uložit stav aktivity cílového prvku. A pokud jsou vstupní pole sémanticky nevhodná pro vytvoření popisku, odkazy jsou v pořádku.

Nahraďte položku seznamu z prvního příkladu odkazem:

Proxima Centauri


Proxima Centaurus (z latiny proxima - nejbližší) - červený trpaslík patřící do hvězdného systému Alpha Centauri, nejbližší hvězda k Zemi po Slunci.

Atribut href s hodnotou javascript: void (0) nutné, aby se zabránilo jakékoli reakci prohlížeče na kliknutí na odkaz.

Následující styly umožňují volat nápovědu s popisem hvězdy kliknutím:

.star .tooltip {
displej: žádný;
}

.star: focus .tooltip {
displej: blok;
}

Odkaz bude udržovat fokus, dokud uživatel neklikne kdekoli na stránce.

Popis na webu lze tedy vytvořit mnoha způsoby, a to i bez použití JavaScriptu. Každá z nich je dobrá, stačí si vybrat nejvhodnější pro konkrétní situaci.