Popisek html a css bez skriptů. Vytváření jednoduchých popisků pomocí HTML5, CSS a jQuery

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.

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:

• Popisek dole
• Popisek vlevo

  Odkazům jsem přiřadil dvě třídy. Třída tooltip bude zodpovědná za tělo tooltipu a druhá třída určí jeho umístění.

  Můžete také vidět atribut custom data-, který obsahuje text naší nápovědy HTML.

  Vytvoření třídy tooltip

  Níže je uveden kód třídy tooltip:

  Tooltip ( position: relativní; ) .tooltip:after ( position: absolute; padding: 8px; border: 3px solid #fff; border-radius: 8px; background-color: #1FDA9A; font-size: .9em; font-weight : tučná barva: #fff obsah: attr(data-tooltip: 80px; viditelnost: skryté .tooltip:hover:after (neprůhlednost: 1; viditelnost: viditelné; )

  Samotný popis HTML hover je pseudoprvkem :after a je umístěn absolutně. To je důvod, proč je nutné přiřadit relativní polohu kotevnímu prvku. Přidal jsem několik základních stylů, jako je výplň, okraj, velikost a šířka písma. Podívejme se blíže na vlastnost content.

  Obsahuje attr() - hodnotu, která ukládá naše vlastní data-tooltip a používá ji k zobrazení textu samotného tooltipu. Místo data-tooltipu můžete použít jakýkoli jiný název, jen se ujistěte, že začíná na data- . Více o těchto atributech se můžete dozvědět zde.

  Tělo popisku má minimální šířku 80 pixelů. Pokud chcete, aby se obsah popisku roztáhl do jednoho řádku, přidejte hodnotu max-content pro vlastnost width, která je aktuálně zakomentována. Je třeba poznamenat, že se jedná o experimentální funkci, takže byste měli používat předpony dodavatele -webkit- a -moz- .

  Chcete-li poskytnout nápovědě HTML hover efekt animace snímku, použijeme vlastnost přechodu. Všimněte si hodnoty 0,25 s, která určuje prodlevu, než se nápověda zobrazí nebo skryje. Nezobrazí se tedy, pokud na text najedete omylem, ale pouze pokud nad textem najedete delší dobu. Také jsem nastavil krytí na 0 a viditelnost na skryté . Nemůžeme použít display: none; , protože prvek zcela zmizí a neuvidíme žádné přechodové efekty. Krytí a viditelnost se změní, když najedete ukazatelem myši na prvek.

  Výsledek:

  Podívejte

  Poznámka: Změnil/odstranil jsem některé značky a styly v ukázce na CodePen. Chcete-li vidět konečný výsledek, podívejte se na demo na konci tohoto článku.

  Přidání pohybu

  Nyní, když jsme implementovali nápovědu HTML, která se objeví/zmizí při najetí myší, pojďme ji přesunout. Vlastnost animace jsme již přiřadili, vše, co musíme udělat, je nastavit počáteční pozici, odkud se má objevit, a koncovou pozici:

  /*Počáteční pozice popisku*/ .tooltip-top:after ( bottom: 150 %; left: 0; ) .tooltip-bottom:after ( top: 155 %; left: 0; ) .tooltip-left:after ( right: 130 % min-width: 100px ) .tooltip-right:after ( left: 130%; min-width: 100px; ) /*Koncová pozice hrotu*/ .tooltip-top:hover:after ( bottom: 120%; ) .tooltip-bottom:hover:after ( top: 125 %; ) .tooltip-left:hover:after ( right: 110 %; ) .tooltip-right:hover:after ( left: 110 %; )

  Rozhodl jsem se přidat tuto funkci do dalších tříd. Pokud tedy přiřadíte například třídu .tooltip-left , zobrazí se tooltip vlevo od textu, pokud přidáte .tooltip-top , tooltip se objeví nahoře atd.

  Zobrazit demo

  V této ukázce používám třídu .tooltip-right. Můžete experimentovat a používat různé třídy k definování různých pozic popisků HTML.

  Vytvoření trojúhelníku

  Posledním prvkem popisku je malý trojúhelník na jedné straně bloku. Vytvoříme ji pomocí pseudotřídy :before (pseudotřída :after se již používá pro samotný tooltip). Přiřadíme jej k našim čtyřem třídám pozic, takže pro každou z nich je trojúhelník vygenerován odpovídajícím způsobem:

  /** * Trojúhelníky */ .tooltip-top:before, .tooltip-bottom:before, .tooltip-left:before, .tooltip-right:before ( content: ""; display: block; position: absolute; border- width: 7px border-color: rgba(0, 0, 0, 0 transition: all .2s easy-in-out .25s top:hover:before, .tooltip-bottom:hover:before, .tooltip-); left:hover:before, .tooltip-right:hover:before ( neprůhlednost: 1; viditelnost: viditelné; )

  Trojúhelník vytvoříme tak, že ohraničení dáme šířku, když samotný prvek nemá žádnou šířku ani výšku. V tomto případě je šířka okraje nastavena na 7 pixelů. Barva rámu je zcela průhledná, což je velmi důležité. V následujícím kusu kódu přiřadím odpovídající straně rámečku barvu, která mi umožňuje definovat tvar trojúhelníku.

  Zbytek stylů vypadá podobně, jako jsme udělali pro tělo nápovědy pro umístění kurzoru HTML. Máme stejné přechody, pozice je absolutní, neprůhlednost je nastavena na 0 a viditelnost je skrytá:

  /*Počáteční pozice trojúhelníku*/ .tooltip-top:before (top: -51%; left: 50%; transform: translateX(-50%); border-top-color: #fff; ) .tooltip-bottom :before ( bottom: -56%; left: 50%; transform: translateX(-50%); border-bottom-color: #fff; ) .tooltip-left:before ( left: -31%; top: 15% ; border -left-color: #fff; ) .tooltip-right:before ( right: -31%; top: 15%; border-right-color: #fff; ) /* Koncová pozice trojúhelníku */ .tooltip -top:hover :before (top: -21 %; ) .tooltip-bottom:hover:before ( bottom: -26%; ) .tooltip-left:hover:before ( left: -11%; ) .tooltip-right :hover:before (vpravo: -11%; )

  Aby se trojúhelník pohyboval stejným způsobem jako nápověda, musíte přiřadit počáteční a koncovou polohu.

  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 = "Je to 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ými způsoby. 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, díky čemuž 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. Nezbývá než 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: font-size: 14px šířka: 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 sami viděli 2 efekty, 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; křivka: 3px 0;

  #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é způsoby

  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, když na ně najedete kurzorem myši, zobrazí se 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: 30%; : rgba( 255,255,230,0,9) Poloprůhledná barva pozadí */ rodina písma: Arial, bezpatkové /* Typ písma */ Velikost písma: 11px /* Velikost textu popisku */ odsazení: 5px 10px; ; / ohraničení: 1px solid #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: 5px; : rgba(0,42,167,0.6); /* Poloprůhledná barva pozadí */ barva: #fff; /* Barva textu */ zarovnání textu: na střed */ rodina-fontů: Arial, sans -serif ; /* Typ písma */ font-size: 11px; /* Velikost textu popisku */ padding: 5px 10px /* Okraje */ border: 1px solid #333;

  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.

  V tomto článku chci diskutovat o několika možnostech uspořádání takové funkce v jakémkoli rozložení. Mimochodem, na svém webu už mám živý příklad takové implementace. Pokud na této stránce přejdete dolů na komentáře a najedete kurzorem na datum komentáře, okamžitě bude jasné, co přesně se říká. No, pokud ještě nejsou žádné komentáře, můžete je zanechat zároveň.

  Vidím dvě hlavní metody implementace tooltipu, to je na přechodu, což je také nejoblíbenější, a méně populární, když kliknete na prvek. Začněme přirozeně se zobrazením popisku, když najedete na prvek.

  V tomto článku jsem si myslel, že začnu tou nejprimitivnější věcí, zobrazením popisku pomocí title , který nelze žádným způsobem formátovat, ale myslím, že ho můžete přeskočit, protože je již jasný. Pokud vám výše uvedené není zcela jasné, myslím, že po prostudování videa o bude vše mnohem jasnější.

  Jednoduchý způsob s designem, na houpačce.

  Není to o nic složitější než metoda, kterou jsem vynechal. Pouze místo atributu title použiji data-title a design pomocí css stylů. Ve skutečnosti uvádím níže html kód:

  ?

  /* Pseudoprvek after použijeme k návrhu samotné lišty, ale zároveň jej skryjeme, protože by se měl objevit pouze při najetí myší */ .hover:after (content: attr(data-title); display: none ;pozice: absolutni: 130% vlevo: 0px; box-shadow: 0 1px 1px rgba(0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16);font-size: 12px;) / * Přidat vlastnost); takže když najedete na prvek, objeví se pole nápovědy */ .hover:hover:after(display: block;)

  Zde bych chtěl upozornit na to, že se jedná pouze o ukázku konstrukčních vlastností. Vzhled matrice si můžete přirozeně navrhnout dle libosti.

  Popisek při umístění kurzoru.

  Toto je možná nejoblíbenější způsob implementace této funkce. Alespoň to já používám nejčastěji.

  ?

  toto je designový tip

  /* nastavení relativního umístění ke kontejneru */ .block(position:relative;) /* Navrhněte skrytý prvek ve výchozím nastavení */ .hidden (display: none; position: absolute; bottom: 130%; left: 0px; background- barva: # fff; zarovnání textu: střed: 0 1px rgba(0,0,0,.16); -shadow: 0 1px 1px rgba(0,0,0,.16 font-size: 12px;) /* Další dekorace pro skrytý prvek (volitelné) */ .hover + .hidden:before (obsah: " "); ;poloha: 98% vlevo: -5px; šířka okraje: 0; vpravo: 7px solid #fff; border-color: #fff transparentní z-index: 2;) /* Další dekorace pro skrytý prvek (volitelné) */ .hover + .hidden :after (content: " "; pozice; : absolutní horní: 10 %; šířka okraje: 5; šířka: 0; ohraničení: 7px plný průhledný; border-right: 7px solid #fff; border-color: rgba(0,0,0,.16) transparent transparent transparent transparent; z-index: 1;) /* Vzhled skrytého prvku při umístění kurzoru */ .hover:hover + .hidden(display: block;)

  Tyto dvě možnosti lze na vašem webu použít k zobrazení popisku, když umístíte kurzor.

  Existují ještě dvě metody, které jsou však téměř totožné, kromě toho, že se prvek zobrazí po kliknutí na prvek, který je na webu vždy zobrazen.

  Jednoduchý způsob s registrací, kliknutím.

  V případě kliknutí bude kód vypadat úplně stejně. Jediná věc je, že jsem pro pohodlí nahradil třídu některých prvků. Pseudotřída focus se také používá místo hover . Za zmínku také stojí, že aby tato metoda fungovala, je nutné ji nahradit , tedy hypertextovým odkazem.

  ?

  CSS kód je v tomto případě podobný vzhledu bloku při najetí myší, pouze pro pohodlí jsou použity jiné třídy. A pro správnou funkci změníme pseudotřídu na focus .

  /* K návrhu samotného spotu používáme pseudotřídu after, ale zároveň ji skryjeme, protože by se měla objevit pouze po kliknutí */ .focus:after (content: attr(data-title); display: none ; pozice: absolutne dole: 0px; barva pozadí: 5px; box-shadow: 0 1px 1px rgba(0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16);font-size: 12px;) / * Přidat vlastnost); takže po kliknutí na prvek se zobrazí pole nápovědy */ .focus:focus:after(display: block;)

  Jak vidíte, není v tom prakticky žádný rozdíl.

  Popisek po kliknutí.

  Tato metoda kliknutí bude také relevantnější, pokud potřebujete naformátovat popisek trochu lépe, než je možné v předchozí možnosti.

  ?

  A skutečný design matrice:

  /* nastavení relativního umístění ke kontejneru */ .block(position:relative;) /* Navrhněte skrytý prvek ve výchozím nastavení */ .hidden (display: none; position: absolute; bottom: 130%; left: 0px; background- barva: # fff; zarovnání textu: střed: 0 1px rgba(0,0,0,.16); -shadow: 0 1px 1px rgba(0,0,0,.16 font-size: 12px;) /* Další dekorace pro skrytý prvek (volitelné) */ .focus + .hidden:before (obsah: " "); ;poloha: 98% vlevo: -5px; šířka okraje: 0; vpravo: 7px solid #fff; border-color: #fff transparentní z-index: 2;) /* Další dekorace pro skrytý prvek (volitelné) */ .focus + .hidden :after (content: " "; pozice; : absolutní horní: 10 %; šířka okraje: 5; šířka: 0; ohraničení: 7px plný průhledný; border-right: 7px solid #fff; border-color: rgba(0,0,0,.16) transparent transparent transparent transparent; z-index: 1;) /* Vzhled skrytého prvku po kliknutí */ .focus:focus + .hidden(display: block;)

  Jak vidíte, není nic složitého. Kromě toho můžete změny stavu organizovat jak najetím myší, tak kliknutím. I když, abych byl upřímný, nemohu říci, jak relevantní je metoda kliknutí a kliknutí.

  Existuje také imitace posledního příkladu pomocí , ale jeho použití se mi nezdá úplně správné konkrétně pro uspořádání tooltipu na vašem webu. Pokud se mnou silně nesouhlasíte, vítám vás v komentářích.

  Video lekce - Popisek bez skriptů.

  To je z mé strany vše. Hodně štěstí všem.

  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 tak, 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); . zaoblené (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(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 tooltipu do bloku #tooltip, přidělíme mu souřadnice kurzoru od okraje stránky + 5 px a nakonec zobrazíme blok s tooltipem 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!