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 nápovědy 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 ;position: absolute; bottom: 130%; left: 0px; background-color: #fff; color: #3aaeda; padding: 5px; text-align: center; -moz-box-shadow: 0 1px 1px rgba(0, 0,0,.16) ; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16);font -size: 12px;) / * Přidejte vlastnost tak, že když najedete na prvek, zobrazí se pole nápovědy */ .hover:hover:after(display: block;)

Zde bych chtěl upozornit na to, že se jedná pouze o ukázku designový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.

V tomto příkladu také nevidím nic zvláštního, ale více, ale výsledek bude lepší i bez použití atributu data-title. Kontejner v tomto případě slouží jako obal pro naše prvky, které budou použity k implementaci tooltipu. A také samotná matrice bude umístěna vzhledem k nádobě.

/* nastavit relativní umístění ke kontejneru */ .block(position:relative;) /* Navrhněte výchozí skrytý prvek */ .hidden (display: none; position: absolute; bottom: 130%; left: 0px; background-color : # fff; barva: #3aaeda; padding: 5px; text-align: center; -moz-box-shadow: 0 1px 1px rgba(0,0,0,.16); -webkit-box-shadow: 0 1px 1px rgba (0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16); font-size: 12px;) /* Další dekorace pro skrytý prvek (volitelné) */ .hover + .hidden:before (content: " "; pozice: absolutní; nahoře: 98 %; vlevo: 10 %; margin-left: -5px; border-width: 5px; border-style: solid; height: * / .hover + .hidden :after (content: " "; pozice: absolutní; nahoře: 100 %; vlevo: 10 %; margin-left: -5px; border-width: 5px; border-style: solid; height: 0 šíř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 . Zde také stojí za zmínku, ž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 ; position: absolute; bottom: 130%; left: 0px; background-color: #fff; color: #3aaeda; padding: 5px; text-align: center; -moz-box-shadow: 0 1px 1px rgba(0, 0,0,.16) ; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16);font -size: 12px;) / * Přidejte vlastnost, aby se po kliknutí na prvek objevilo 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:

/* nastavit relativní umístění ke kontejneru */ .block(position:relative;) /* Navrhněte výchozí skrytý prvek */ .hidden (display: none; position: absolute; bottom: 130%; left: 0px; background-color : # fff; barva: #3aaeda; padding: 5px; text-align: center; -moz-box-shadow: 0 1px 1px rgba(0,0,0,.16); -webkit-box-shadow: 0 1px 1px rgba (0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16); font-size: 12px;) /* Další dekorace pro skrytý prvek (volitelné) */ .focus + .hidden:before (content: " "; pozice: absolutní; nahoře: 98 %; vlevo: 10 %; margin-left: -5px; border-width: 5px; border-style: solid; height: * / .focus + .hidden :after (content: " "; pozice: absolutní; nahoře: 100 %; vlevo: 10 %; margin-left: -5px; border-width: 5px; border-style: solid; height: 0 šíř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.

V této lekci to uděláme popis při umístění kurzoru na ikonu na vyčištění CSS. Úplně stejný princip lze aplikovat na obrázek. Přejít k zobrazení ukázkové stránky .

HTML značení

Vytvořme seznam pěti položek. Uvnitř každé položky umístíme visačku i s požadovanou ikonou, jednoduše zkopírováním kódu pro konkrétní ikonu z webu Písmo úžasné.

Pod tag ikonky napíšeme tag rozpětí s odpovídajícím krátkým textem nápovědy.

• 
  
  Pohodlné pokoje
  


• 
  
  Kreditní karty
  


• 
  
  Sprcha na pokoji
  


• 
  
  Včetně snídaně
  


• 
  
  Domácí mazlíčci OK
  

Poté připojte soubor stylů - styl.css. Změňte polohu ikon z vertikální na horizontální.

Chcete-li to provést, přiřaďte hodnotu nadřazenému kontejneru - flex.

ul(
displej: flex;
}

Barvíme pozadí pod ikonami a barvu samotných ikon.

Ulli (
pozadí: #cecfcf;
barva: #fff;
}

Velikost ikony se nastavuje pomocí velikosti písma.

Ulli (
velikost písma: 40px;
}

Vzhled řádku ikon již byl vytvořen.

Když najedete kurzorem na ikonu, změní se barva ikony a vzhled kurzoru.

Ul li:hover (
barva: #03a9f4;
kurzor: ukazatel;
}

Popisek

Když na ikonu najedete myší, v obdélníkovém bloku se objeví textová nápověda HTML markup je text ve značce rozpětí. Umístíme nápovědu nad ikony.

Ulli span (
pozice: absolutní;
horní: -30px;
vlevo: 50 %;
transform: translateX(-50%) translateY(-20px);
}

Nastavíme velikosti krabic na následující pevné velikosti.

Ulli span (
šířka: 120px;
výška: 24px;
}

Svisle a vodorovně zarovná text na střed.

Ulli span (
line-height: 24px;
text-align: center;
}

Barva pozadí, barva textu a velikost textu.

Ulli span (
pozadí: #03a9f4;
barva: #fff;
velikost písma: 14px;
}

Zaoblete rohy o 4 pixely a udělejte plynulý přechod při najetí.

Ulli span (
border-radius: 4px;
přechod: ,5s;
}

Popisek se stává neviditelným a průhledným.

Ulli span (
neprůhlednost: 0;
viditelnost: skrytý;
}

Pseudoprvek::před

Abychom pod blok nakreslili malou šipku, použijeme pseudo prvek ::před, což v praxi znamená, že šipka ve skutečnosti chybí HTML soubor (prázdný obsah), ale existuje pouze v CSS soubor. Šipka s hrotem směřujícím k ikoně není nic jiného než čtvercový tvar 10x10 pixelů, otočený o 45 stupňů a přitisknutý k bloku. rozpětí se zápornou hodnotou. V důsledku toho se čtverec přemění na trojúhelník a leží na vrstvě pod ním z-index: -1 než jeho nadřazená značka rozpětí.

Dnes si vytvoříme tooltipy pomocí CSS. Popisky jsou to, co uvidíte, když například umístíte kurzor nad odkaz, pokud atribut title obsahuje jeho popis.

Popisek lze použít pro odkazy i obrázky.

V nezpracované podobě vypadá popis nástroje takto:

Popisek se zobrazuje standardní systémovou metodou pomocí atributu title.
Standardní kód odkazu s popiskem bez dekorace:

Odkaz

Popisek CSS

Svůj popis můžete upravit pomocí CSS. Podíváme se na tři možnosti popis v CSS.

Bohužel neexistuje žádný CSS „recept“ na design titulků, takže budeme muset přidat další atributy, označit jejich design a přidat je do kódu odkazu/obrázku, pro který chceme vytvořit krásný tooltip CSS.

V prvním příkladu uděláme tooltip CSS v horní části obrázku úplně dole.

Použijeme k tomu dva atributy: obrázek a aby tooltip fungoval, použijeme ::after a data-text pro zobrazení textu tooltipu.

Styly CSS pro tento příklad:

Obrázek ( display: inline-block; position: relativní; ) .image:hover::after ( content: attr(data-text); /* Zobrazení textu nápovědy */ pozice: absolutní; vlevo: 0; vpravo: 0; dole: 0px; /* Pozice popisku */ z-index: 1; /* Zobrazení popisku nad ostatními prvky */ pozadí: rgba(0,255,102,0,6); /* Barva (RGB) a její průhlednost */ barva: # fff; /* Barva textu */ zarovnání textu: na střed; /* Zarovnat text na střed */ 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í */ )

1

Výsledek:

Tento design nebude fungovat pro odkazy, takže pro ně použijeme trochu jiné možnosti.
První možnost zobrazí nad odkazem nápovědu.

Podskazka( display: inline; position: relativní;).podskazka:hover:after( background: #333; background: rgba(204,102,0,.8); border-radius: 5px; bottom: 26px; color: #fff; content: attr(title); left: 20%; padding: 5px 15px; position: absolute; z-index: 98; width: auto;).podskazka:hover:before( /* Přidejte šipku do spodní části popisku block */ border : solid; border-color: #cc6600 transparent; border-width: 6px 6px 0 6px; bottom: 20px; content: ""; left: 50%; position: absolute; z-index: 99;)

Odkaz

A poslední možností je zobrazení tooltipu pod odkazem. Možnost je podobná jako u předchozí, pouze se níže zobrazuje nápověda.

Tooltip ( position: relativní; /* Nastaví prvek jako nadřazený pro popisky */ kurzor: help;).tooltip span ( position: absolute; /* Vyjme prvek z toku */ margin-left: -30000px; /* A skryjte jej daleko za okraj obrazovky */ barva pozadí: rgba(0,0,153,.8); /* Pozadí vyskakovacího bloku */ barva: #fafafa; /* Barva textu */ odsazení: 10px; / * Odsazení */ -webkit-border- radius: 5px; /* Zaoblené rohy */ -moz-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;).tooltip:hover span ( /* Při umístění kurzoru */ margin-left : 0; /* Vraťte blok ze vzdáleného okraje mimo obrazovku na jeho místo */ šířka: 250px; /* Nastavit šířku */ z-index: 1000; /* Umístit to úplně nahoře */ /* Umístěte jej relativně k nadřazenému bloku */ top:30px ; /* Horní výplň */ vlevo:20px; /* Levá výplň */ ).tooltip span:after( content: ""; /* Přidán obsah */ width:0; /* Skrýt jej otočením na 0 */ výška :0; border-bottom: 10px solid #000099; /* Pomocí spodního okraje nastavte barvu a výšku trojúhelníku * / border-right: 30px solid transparent; /* Vpravo - šířka trojúhelníku vpravo */ pozice: absolutní; /* Pozice vzhledem k rodičovskému bloku */ top:-10px; vlevo: 10px ;)

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 do prvku vkládají fotografie

, 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

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

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

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.