Od autora: Ahoj. Popisek je malý vysvětlující text, který se zobrazí, když najedete na prvek, obvykle obrázek. Dnes se podíváme na to, jak můžete vytvořit tooltip v HTML různými způsoby.

Standardní nápověda

Ve výchozím nastavení je atribut title zodpovědný za zobrazení vysvětlujícího textu. Může být použit pro různé prvky, ale obvykle se používá pouze pro obrázky k vysvětlení toho, co zobrazují.

V jednom z předchozích článků jsem použil obrázek tygra, abych ukázal práci s velikostí obrázků. Pokud vám to nebude vadit, použiji tento obrázek znovu. Chcete-li tedy zobrazit nápovědu, stačí přidat atribut title a napsat do něj požadovaný text.

< img src = "tiger.jpg" title = "Tohle je tygr" >

Může obsahovat jedno slovo nebo několik vět. A takhle to vypadá:

Nápověda se objeví plynule, ne hned po najetí, ale po nějaké době. Toto je výchozí chování.

Hlavním problémem takového tooltipu je, že jej nelze stylizovat. Jak tento problém vyřešit? Budeme muset napovědět jiným způsobem. Teď vám pár ukážu.

Čistá css metoda

Velmi zajímavý způsob, který vám umožní krásně zobrazit nápovědu k obrázku. HTML značení je jednoduché, pouze obrázek je potřeba uzavřít do blokového kontejneru, kterému přiřadíme identifikátor, abychom na něj mohli později odkazovat ve stylech:

< div id = "tiger" data - name = "tygr sumaterský"> < img src = "tiger.jpg" > < / div >

Jediná věc, která vám zde může být nejasná, je atribut data-name. Jde o to, že se jedná o takzvaný datový atribut, který sám o sobě nic nedělá, ale jeho hodnotu lze použít v css a javascriptu, což je v některých případech užitečné. To uvidíte příště.

Nejprve si tedy popíšeme styly pro kontejner. Potřebujeme relativní umístění, protože blok s vysvětlujícím textem umístíme absolutně tak, aby k umístění došlo vzhledem k nadřazenému bloku, a ne k celé stránce.

#tiger( pozice: relativní; zobrazení: vložený blok; )

#tygr( poloha: relativní; zobrazení: inline - blok;

Blokové řádkové zobrazení zabrání roztažení bloku (a s ním i bloku s popiskem, který vytvoříme) přes celou šířku okna. Zbývá už jen vytvořit samotný hint. V CSS je velmi pohodlné to udělat pomocí pseudoprvků. Takhle:

#tiger:hover:after ( obsah: attr(název-dat); pozice: absolutní; vlevo: 0; dole: 0; pozadí: rgba(5,13,156,.55); barva: #fff; zarovnání textu: na střed ; font-family: kurzíva; font-size: 14px; padding: 3px 0; width: 100%; )

#tiger:hover:after ( obsah: attr (data - jméno); pozice: absolutní; vlevo: 0; dole: 0; pozadí: rgba(5, 13, 156, . 55); barva : #fff; text - zarovnat : střed ; rodina písem: kurzíva; velikost písma: 14px; odsazení: 3px 0; šířka: 100 %;

Existuje spousta kódu, ale není zde nic složitého. Selektor #tiger:hover:after znamená následující: když najedeme na blok s obrázkem, musíme vytvořit pseudoprvek after (a pak jsou pravidla uvedena ve složených závorkách). Vlastnost content: attr(název-dat) nastavuje textovou hodnotu bloku. Bude se rovnat tomu, co je zapsáno v atributu data-name bloku obalu obrazu.

Tato nápověda se zobrazí, když najedete na obrázek, ale na rozdíl od standardního to udělá náhle a samotný vzhled se objeví okamžitě v okamžiku najetí. V tomto případě nebude možné implementovat hladký přechod, protože hladké přechody nejsou podporovány pro pseudoprvky.

Metoda 2. Čistý css a hladký vzhled

Drobným přepsáním kódu však můžete dosáhnout hladkého vzhledu popisku a opět bez použití javascriptu.

Abyste se sami přesvědčili o 2 efektech, které vám ukážu příště, doporučuji otevřít Poznámkový blok nebo jakýkoli pohodlný editor kódu a vše po mně zopakovat. Je pravda, že k tomu stále musíte zahrnout soubor stylů, ačkoli styly mohou být také zapsány v html ve značkách

Obsah popisku je odstraněn ze zobrazení pomocí záporné vlastnosti levého okraje namísto zobrazení: žádné nebo viditelnosti: skryté, protože některé programy pro čtení z obrazovky tyto vlastnosti ignorují.

CSS styly pro popisky

Brzy zajistíme, aby popisky fungovaly stejným způsobem v různých prohlížečích. Nyní přidáme pár řádků kódu CSS.

Přidáním následující části kódu zobrazíme na obrazovce nápovědu, i když budou vypadat banálně a bude těžké je vizuálně oddělit od zbytku textu.

CSS pro zobrazení popisku

.tooltip:hover span ( font-family: Calibri, Tahoma, Geneva, sans-serif; position: absolute; left: 1 em; top: 2 em; z-index: 99; margin-left: 0; width: 250px; ) . tooltip:hover img ( border: 0; margin: -10px 0 0 -55px; float: left; position: absolute; ) .tooltip:hover em ( font-family: Candara, Tahoma, Geneva, sans-serif; font-size : 1,2 em; váha písma: tučné; zobrazení: blok; výplň: 0,2 em 0 0,6 em 0; ) .classic ( výplň: 0,8 em 1 em; ) .custom ( výplň: 0,5 em 0,8 em 0,8 em 2 em; ) *html a:hover (pozadí: průhledné; )

Potřebujete řetězec *html

Možná se ptáte, proč je ve výše uvedeném kódu zahrnut poslední řádek? Nastavuje průhlednost pozadí odkazu. Při testování popisků jsem v IE6 objevil podivný efekt, který nebylo možné odstranit, dokud existovalo pozadí odkazu!

Výše uvedený kód zajišťuje funkčnost popisků. Jsou zobrazeny na obrazovce, ale je poměrně obtížné je oddělit od obecného textu. Neexistují žádná barevná schémata, která by zvýraznila text popisku na stránce.

Nastavit barevné schéma pro popisky/

Následující kód nastavuje barevné schéma pro každý z pěti stylů popisků.

Po změně kódu stránky a jeho aktualizaci v prohlížeči se při najetí myší na odkaz zobrazí tooltipy téměř stejně ve všech prohlížečích.

CSS kód pro barevné schéma

.classic ( pozadí: #FFFFAA; okraj: 1px plný #FFAD33; ) .kritický ( pozadí: #FFCCAA; rám: 1px plný #FF3334; ) .help ( pozadí: #9FDAEE; rám: 1px plný #2BB0D7; ) .info ( pozadí: #9FDAEE; okraj: 1px plný #2BB0D7; ) .warning ( pozadí: #FFFFAA; rám: 1px plný #FFAD33; )

CSS kód je velmi jednoduchý, ale dává skvělý vzhled popiskům a dělá svou práci všude. Barevné schéma lze změnit dle vašeho uvážení.

Několik doteků CSS3 pro pokročilé zobrazení popisků

Než dokončíme tento tutoriál, přidáme několik řádků kódu CSS3, abychom do našich tipů přidali vizuální efekty. Nastavíme zaoblené rohy pomocí vlastnosti border-radius a přidáme nějaký rozměr pomocí vlastnosti box-shadow.

Protože žádná z těchto vlastností není globálně podporována, budou fungovat pouze v některých nejnovějších verzích prohlížeče. Ale tam, kde fungují, budou popisky vypadat elegantně a sexy!

Přidejte níže uvedený kód do selector.tooltip:hover span a obnovte stránku.

Vizuální efekty pro ohraničení, stíny a průhlednost zvednou nápovědu nad text stránky a učiní informace kontrastní a snadno čitelné.

Můžete si všimnout, že se nepoužívají pouze oficiální vlastnosti CSS3, ale také rozšíření pro Mozillu a WebKit.

Další vlastnosti CSS pro nové prohlížeče

border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0,1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0,1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0,1);

souhrn

Tento tutoriál ukazuje, že vylepšení rozhraní nevyžaduje mnoho úsilí. Kromě toho stojí za to zopakovat si zkušenosti s používáním CSS, které se může hodit při nastavení nové úrovně interaktivity webové aplikace.