Jak vytvořit nápovědu v HTML? Popisky pro CSS Html, jak vytvořit popis

Od autora: Dobrý den. 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 = "Суматранский тигр" > < 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

Takže kód pro tento příklad bude trochu jiný, a to proto, že nebudeme používat pseudo prvek. Bylo to kvůli tomu, že nebylo možné aplikovat hladké změny. Tentokrát bude kód vypadat takto:

Tygr sumaterský

< div id = "tiger2" >

< img src = "tiger.jpg" >

< div class = "text" >Tygr sumaterský< / div >

< / div >

CSS kód neprošel žádnými velkými změnami:

#tiger2( pozice: relativní; zobrazení: inline-blok; ) #tiger2 .text ( přechod: vše 0,6s; neprůhlednost: 0; pozice: absolutní; vlevo: 0; dole: 0; pozadí: rgba(5,13,156,. 55); barva: #fff; text-align: center; font-family: cursive; font-size: 14px; padding: 3px 0; width: 100%; transform: scale(0); ) #tiger2:hover .text (neprůhlednost: 1; )

#tygr2(

poloha: relativní;

zobrazení: inline - blok;

#tiger2.text (

přechod: vše 0,6s;

transform:scale(0);

#tiger2:hover.text(

krytí: 1;

Odstraňujeme pouze vlastnost content, protože je podporována pouze pseudoprvky. Přidáme vlastnost přechodu, která vytváří plynulé přechody stavů. Dobře, neprůhlednost: 0 poskytne našemu bloku popisků plnou průhlednost, takže nebude na stránce vidět.

Při najetí na blok nyní stačí vrátit bloku normální průhlednost pomocí tooltipu. Připraveno. Můžete zkontrolovat, zda se prvek zobrazuje hladce.

Pomocí css3 můžete skrýt prvek jiným způsobem. Například pomocí transformací. Nahraďte plnou průhlednost touto vlastností: transform: scale(0) a velikost bloku se zmenší na nulu, takže to prostě nebude na obrazovce. Když najedete na blok s obrázkem, měli byste vrátit normální velikost takto: transform: scale(1). V tomto případě bude vzhledový efekt vypadat ještě krásnější. O tom se můžete přesvědčit sami.

Jak můžete vidět, v css se může pomalu objevit i nápověda s krásnými efekty.

jiné metody

jQuery vám může poskytnout ještě více možností. Pomocí této knihovny můžete napsat kód pro zobrazení nápovědy buď sami, nebo najít nějaký plugin, který to již implementuje.

Například framework Bootstrap má také mnoho hotových komponent a jednou z nich jsou tooltipy. V dokumentaci rámce se můžete podívat na příklady kódu, které vám umožňují vytvářet stejné rady a používat je. Není nutné připojovat celý Bootstrap, obecně můžete ponechat pouze takovou komponentu, jako jsou tooltipy, stáhnout a připojit pouze to.

Obecně jsem vám dnes ukázal způsoby, jak v CSS vytvořit krásný tooltip s ostrým a hladkým vzhledem, navíc máte ve svém arzenálu Bootstrap a jQuery. Vyberte si cokoli a implementujte zajímavé a krásné tipy na své stránky!

Vlad Merževič

HTML již má globální atribut title, který lze přidat do libovolného prvku na webové stránce. Přítomnost tohoto atributu přidává nápovědu, která se zobrazí, když najedete myší na prvek. Písmo textu, velikost popisku a jeho vzhled obecně závisí na operačním systému a nelze je změnit pomocí stylů. Řada vývojářů navíc není ráda, že takový náznak celkem rychle mizí. To vás nutí hledat způsoby, jak vytvořit svůj vlastní tooltip, který by byl navržen požadovaným způsobem. Nejuniverzálnější způsob je samozřejmě, ale v některých případech si vystačíte se samotným CSS.

Jako příklad jsem zvolil fotografie, po najetí kurzorem myši na ně se zobrazí název fotografie. Uděláme samotný textový výstup pomocí vlastnosti content a převezmeme textovou hodnotu z nějakého atributu přes attr() . Bohužel obsah nebude v kombinaci s img fungovat podle představ, takže se fotky vloží do prvku, ke kterému přidáme atribut data-title s textem tooltipu. Existuje pokušení vložit atribut title a použít jej, ale v tomto případě se zobrazí dva popisy současně: jeden je „nativní“ a druhý je náš. Takže používáme vlastní atribut data-title, protože HTML5 to umožňuje. Získáme tak následující kód (příklad 1).

Příklad 1: HTML kód

HTML5 IE Cr Op Sa Fx

Popisek v CSS

Přejděme ke stylu našeho tooltipu. Nejprve je potřeba, aby se vůbec objevil. K tomu použijeme pseudoprvek ::after, ke kterému přidáme obsah: attr(data-title) .

Photo::after ( content: attr(data-title); )

Ukazuje se, že po obsahu prvku s třídou fotografie se zobrazí text z atributu data-title, což jsme potřebovali. Protože by se ale popis měl objevit pouze tehdy, když na fotku najedete kurzorem myši, přidáme také pseudotřídu :hover.

Photo:hover::after ( content: attr(data-title); )

Zbývá pouze nastavit požadovaný styl našeho tooltipu, zejména pozici, barvu pozadí, text, rámeček atd. (příklad 2).

Příklad 2: Styl popisku

HTML5 CSS3 IE Cr Op Sa Fx

Popisek v CSS .photo ( display: inline-block; /* Inline-block element */ position: relativní; /* Relativní umístění */ ) .photo:hover::after ( content: attr(data-title); / * Zobrazit text */ pozice: absolutní; /* Absolutní umístění */ vlevo: 20 %; nahoře: 30 %; /* Umístění popisku */ z-index: 1; /* Zobrazit popisek nad ostatními prvky */ pozadí: rgba ( 255,255,230,0.9); /* Průsvitná barva pozadí */ rodina písem: Arial, sans-serif; /* Rodina písem */ velikost písma: 11px; /* Velikost textu popisku */ odsazení: 5px 10px; /* Okraje * / ohraničení: 1px plný #333; /* Možnosti ohraničení */ )

Výsledek tohoto příkladu je znázorněn na Obr. 1.

Rýže. 1. Typ popisku

Poloha popisku nezávisí na poloze kurzoru, zobrazí se na stejném místě, když najedete kurzorem na obrázek. Popisek můžete nastavit ve spodní části fotografie, takže nezakryje většinu obrázku. Styl se mírně změní (příklad 3).

Příklad 3. Zobrazení popisku ve spodní části fotografie

HTML5 CSS3 IE Cr Op Sa Fx

Popisek v CSS .photo ( display: inline-block; /* Inline-block element */ position: relativní; /* Relativní umístění */ ) .photo:hover::after ( content: attr(data-title); / * Zobrazit text */ pozice: absolutní; /* Absolutní umístění */ vlevo: 0; vpravo: 0; dole: 5px; /* Umístění popisku */ z-index: 1; /* Zobrazit popisek nad ostatními prvky */ pozadí : rgba(0,42,167,0.6); /* Poloprůhledná barva pozadí */ barva: #fff; /* Barva textu */ zarovnání textu: na střed; /* Zarovnat text na střed */ rodina písem: Arial , sans-serif ; /* Typ písma */ velikost písma: 11px; /* Velikost textu popisku */ odsazení: 5px 10px; /* Okraje */ ohraničení: 1px plné #333; /* Možnosti ohraničení */ )

Výsledek tohoto příkladu je znázorněn na Obr. 2.

Rýže. 2. Typ popisku

Bohužel vlastnost přechodu, kterou můžete použít k animaci popisku, nefunguje s pseudoprvky. Proto se budeme muset spokojit s náhlým objevením našeho popisku. Také to nebude mít žádný účinek v prohlížeči IE8 a starších, tato verze nepodporuje ::after . Pokud však tento pseudoelement nahradíte :after , můžete získat víceméně funkční možnost.

Layoutoví guruové v tomto příspěvku pravděpodobně nenajdou nic nového. Tento příspěvek je spíše pro začínající návrháře rozvržení, kteří stejně jako já měli problémy s vytvářením a stylováním univerzálních popisků.

Nedávno, když jsem dělal malý blog, jsem stál před úkolem udělat stylové, ale zároveň jednoduché tooltipy. Po vyzkoušení různých způsobů vytváření samostatných div kontejnerů pro tooltipy, nebo vytváření tooltipů s čistým CSS, jsem našel univerzální řešení, které nebude zahlcovat kód, bude kompatibilní s různými prohlížeči a zároveň bude velmi jednoduché na implementaci.
Koho zajímá můj způsob řešení tohoto jednoduchého problému, ptám se pod kat.

Řešení Metoda, kterou vám nabídnu, je poměrně jednoduchá a účinná. Funguje ve všech prohlížečích, dokonce i IE 6 (mně mnohokrát testováno). Snadno vyměnitelné a pohodlné. Nezatěžuje kód a činí jej přehledným. Lze jej snadno změnit, aby vyhovoval vašim potřebám. Například zpozdit zobrazení popisku pomocí setTimeout nebo něčeho jiného.HTML Předpokládejme, že máme stránku HTML s odkazem, když na ni najedeme, musíme zobrazit popisek:
Odkaz na popisky
Jak jste si již mohli všimnout z výpisu, používám LESS css preprocesor.
CSS styly a skripty jsme zahrnuli do samostatných souborů. Máme také jeden odkaz a blok div, který bude kontejnerem pro popis.
Specifikace HTML5 umožňuje použití vlastních atributů typu data-atribute, které mohou uchovávat některé informace o prvku nebo bloku. Právě do datových atributů uložíme text tooltipů.
Odkaz
Pro ukládání používám atribut data-tooltip.
S HTML jsme skončili – můžeme přejít ke stylům CSS Já používám knihovnu LESS Elements a doporučuji ji všem, takže nějaké vlastnosti napíšu pomocí tohoto frameworku.
@import "css/elements.less"; #tooltip ( z-index: 9999; position: absolute; display: none; top:0px; left:0px; background-color: #000; padding: 5px 10px 5px 10px; color: white; .opacity(0.5); . zaokrouhleno(5px); )
Z výpisu je zřejmé, že v prvním řádku připojíme LE, nastavíme blok div#tooltip na absolutní polohování a skryjeme. Dále bloku dáme barvu pozadí a barvu textu, zaoblíme rohy (5px) a nastavíme hodnotu průhlednosti na 50 %. jQuery Nyní přichází ta zábavná část – jQuery.
$.jQuery(document).ready(function() ( $("").mousemove(funkce (eventObject) ( $data_tooltip = $(this).attr("data-tooltip"); $("#tooltip") .text($data_tooltip) .css(( "nahoře" : eventObject.pageY + 5, "vlevo" : eventObject.pageX + 5 )) .show(); )).mouseout(function () ( $("#tooltip) ").hide() .text("") .css(( "nahoře" : 0, "vlevo" : 0 )); )); ));// Připravený konec.
Nyní do výběru přidáme všechny prvky s atributem data-tooltip a když najedeme myší na požadovaný prvek, získáme hodnotu tooltipu a uložíme ji do proměnné. Dále přidáme text nápovědy do bloku #tooltip, přidělíme mu souřadnice kurzoru od okraje stránky + 5 px a nakonec zobrazíme blok s popiskem na správném místě. Poté, co myš opustí prvek, skryjeme blok #tooltip, vymažeme jeho obsah a vrátíme jej na 0;0;.

To je vše!
Ve výsledku dostaneme něco takového: Demo

Díky tomuto jednoduchému skriptu dostanou tooltip všechny prvky na stránce, které mají atribut data-tooltip.

Děkuji za pozornost!

Nápověda HTML je blok s dalšími informacemi, který se zobrazí, když najedete myší na konkrétní prvek webové stránky. Dnes si vytvoříme vlastní tooltip pomocí HTML a CSS:

Zobrazit demo | Stáhněte si zdrojový kód

Budeme moci používat CSS nápovědy pro většinu prvků, jako jsou odkazy, značky, stylizovaný text atd. Budeme muset na prvek aplikovat několik tříd a přidat atribut data- s textem nápovědy.

Nastavení dokumentu

Musíme vytvořit dokument HTML a nastavit zdrojové označení:

Popisky Ukázka // obsah

Přidal jsem odkaz na Normalize.css, který pomáhá resetovat všechny styly prohlížeče na výchozí a zajišťuje, že každý prvek vypadá ve všech prohlížečích stejně. Na rozdíl od standardního resetu CSS neodstraní Normalize.css všechny výchozí styly, takže nebudete muset přepisovat styl každého prvku od začátku.

Vytvořil jsem div s třídou kontejneru, do které umístíme základní příklady HTML tooltipů. Zde jsou styly pro tělo a třídu .container:

tělo ( rodina písma: "Work Sans", bezpatkové; velikost písma: 1,5 em; výška řádku: 1,4 em; váha písma: 700; barva pozadí: #28ABE3; barva: #fff; ) .container ( šířka: 800px; okraj: 100px auto; pozadí: radiální-gradient(kruh nejvzdálenějšímu rohu při 400px 250px, #64BBE0 0%, #28ABE3, #28ABE3 95%); )

Vycentroval jsem kontejner div nastavením margin-left a margin-right na auto . Také přidán nějaký styl do části těla, aby vypadala lépe.

Rozhodl jsem se přidat malý lehký přechod CSS na pozadí. Pokud prohlížeč nepodporuje CSS přechody (to platí zejména pro IE 8 a 9), barva pozadí se přepne zpět na výchozí modrou (barva pozadí části těla).

S kotevními značkami použiji nápovědy HTML pro ukotvení, ale třídy můžete přiřadit i jiným vloženým prvkům, jako je silný tag nebo span . Níže je obsah kontejneru div:

SOUVISEJÍCÍ ČLÁNKY