Jak vytvořit jednoduchý popis CSS3

Nástrojové tipy jsou skvělý způsob, jak ukázat vašemu uživateli více informací, a to jednoduchým pohybem nad obrázkem nebo textem. Mohou být například použity k vytváření titulků pro obrázky nebo k delším popisům odkazů nebo ke všem užitečným informacím, které by zlepšily uživatelskou zkušenost vašeho webu, aniž by narušily design.

Dnes vám ukážeme, jak vytvořit jednoduchý tooltip pomocí HTML a CSS, abyste zobrazili značku názvu vašich hypertextových odkazů.

Začneme tím, že vytvoříme jednoduché značení pro odkaz. Musíme mu dát název, který bude obsahem popisu nástrojů, a přiřadit mu třídu:

CSS3 Tooltip

Dalším krokem je vytvoření stručného stylingu pro naši třídu nástrojů:

.tooltip{display: inline;position: relative;}

Nyní zobrazujeme náš popis v návaznosti na náš odkaz pomocí relativního umístění. Dále chceme vytvořit zaoblenou skříňku, která vytvoří tělo popisu a umístí ji tak, aby se vznášel nad odkazem:

.tooltip:hover:after{background: #333;background: rgba(0,0,0,.8);border-radius: 5px;bottom: 26px;color: #fff;content: attr(title);left: 20%;padding: 5px 15px;position: absolute;z-index: 98;width: 220px;}

Používáme: volič pohybu, který vybere prvek, v tomto případě náš odkaz, na myši a: po selektoru, který vloží obsah za vybraný prvek. Zadali jsme černé pozadí s 80% opacitou a pro prohlížeče, které nepodporují barvy RGBA, jsme poskytli tmavě šedé pozadí.

Mírně zaoblené rohy jsou vytvořeny pomocí atributu border-radius a barvu textu nastavíme na bílou. Nakonec jsme z levé strany odkazu našli pole s popisem a přidali jsme trochu polstrování.

Stejně jako styling a polohování jsme nastavili vlastnost obsahu:

content: attr(title);

Tato vlastnost nám umožňuje vložit požadovaný obsah, což může být řetězec, mediální soubor nebo atribut prvku. V tomto případě používáme atribut názvu odkazu.

Nyní, když umístíte ukazatel myši nad váš odkaz, nad ním by se měl zobrazit textový popisek s textem, který jste nastavili jako název odkazu. Máme však jeden problém, informace o názvu se zobrazují dvakrát: jednou v popisu nástroje a jednou prohlížečem. Chcete-li to opravit, musíme provést nepatrnou změnu v našem kódu HTML:

CSS3 Tooltip 

Co jsme zde udělali, je zabalit text odkazu v tagu rozpětí s vlastním atributem názvu. Nyní bude prohlížeč zobrazovat sadu titulů v tagu rozpětí, když je odkaz přesunut.

K dokončení přidáme šipku do dolní části popisku, abychom jí dodali malý extra styl. Děláme to pomocí příkazu: před voličem a některými styly ohraničení:

.tooltip:hover:before{border: solid;border-color: #333 transparent;border-width: 6px 6px 0 6px;bottom: 20px;content: "";left: 50%;position: absolute;z-index: 99;}

K vytvoření efektu šipky používáme několik okrajových hacků: nastavení barev na okraji vlevo a vpravo na transparentní a ovládání šířky okrajů. Umístili jsme také šipku tak, aby seděla na spodku pole s popisem nástroje.

A tam ji máte, jednoduchý nástrojový popis s nadpisem nadpisu prvku. Můžete také použít toto pro značky alt obrázků, nebo dokonce jen dát svůj vlastní text do CSS pop-up, kde chcete.

Můžete zobrazit a pracovní demo zde .

Jak vytvoříte tipy? Používali jste tuto techniku ​​na webu? Dejte nám vědět v komentářích.

Doporučený snímek / náhled, nápověda přes Shutterstock.