Stylování atributu title

Atribut title je obecný HTML atribut (lze jej přiřadit takřka ke všem značkám). A projevuje se zobrazením bubliny při najetí na HTML tag, který má title vyplněn.

<p><span title='Já jsem text.'>Text</span> odstavce

Tento text má nad sebou bublinu.

Čisté CSS

Od Exploreru 8 není problém vypsat obsah atributu do stránky po najetí myší.

span[title]:hover:after {
  content: attr(title); 
  /* vlastní vzhled */
}

Pomocí vlastního stylu jde popisek třeba naposicovat nad slovo:

Tento text má atribut title.

Pomocí transition by šlo ještě vykouzlit nějaký efekt postupného objevení nebo tak něco.

Bohužel se ale kromě pečlivě nastylovaného popisku objeví zároveň i popisek klasický, jak jej vykresluje standardně prohlížeč.

Vlastní název atributu

První možnost, jak nechtěný výchozí title řešit, je místo do title uvést popisek do vlastního atributu:

Tento text má atribut vlastni-title.

Pokud je komplikované všechny title atributy na stránce přepsat přímo v kódu, může to udělat JS na straně klienta.

Stornování JavaScriptem

Výchozí title lze vypnout, tj. nastavit jej skriptem na prázdnou hodnotu.

Teoreticky by šlo popisek z title přešoupnout do vlastního atributu a ten použít místo title v CSS kódu výše uvedeném (ukázka).

Otázka ale je, zda když už se stejně JS do řešení zapojuje, nevytvořit popisek celý skriptem. Tedy udělat z title běžný element a ten umístit k elementu s popiskem při onmouseover (najetí myši).

Díky JS půjde i zajistit, aby se popisek inteligentně umisťoval do viewportu (CSS popisek bude klidně mimo stránku, když to tak vyjde).

Výhodné rovněž je popisek umístit rovnou do obalu stránky (nikoliv do elementu, který popisuje). Není potom problém používat overflow: hidden – CSS popisek přes :before/:after by to ořízlo.

Hotová řešení

Z hotových řešení:

Nejlepší title je žádný title

Ještě se nabízí title vůbec nepoužívat a popisek dát přímo do nějaké HTML značky nebo v případě textu do závorek. Dává to docela smysl.

  1. Obsah atributu title není moc přístupný. Může být docela problém na dotykových zařízeních nebo bez myši se k jeho obsahu dostat.

    Třeba i iPadu/iPhone se jde dostat k title jen u obrázku.

  2. Obsah je náchylnější k přehlédnutí.

  3. Obsah atributu se obtížně hledá běžnou funkcí prohlížečů Hledat (Ctrl + F).

  4. Text vložený přes content neumí většina prohlížečů označit.

  5. Z těchto důvodů mu vyhledávače budou nejspíš přikládat nízkou váhu.

Zobrazení title v závorce

Čistě v CSS jde popisek z title rozbalit do závorky. Příklad pro populární značku <abbr> s atributem title:

abbr[title] {
    border-bottom: 0;
}

abbr[title]:after {
    content: "(" attr(title) ")";
}

Problémy s označováním a vyhledáváním textu z atributu ale přetrvávají.

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Stylování <select>u

Stylování <select>u

Roletový seznam nabízí omezené možnosti v úpravách vzhledu. Které to jsou a jak je rozšířit?

Jak zakázat označování textu

Zakázání označování textu

Standardně jde na webu označovat text. Jak jeho výběru myší zabránit?

Stylovat třídy, nebo elementy?

Stylovat třídy, nebo elementy?

Je lepší stylovat přímo HTML elementy, nebo všechny styly přiřazovat třídami?

Placeholder

HTML atribut placeholder

HTML atribut placeholder slouží k zadání ukázkové hodnoty do formulářového pole.

Skloňování v CSS

„Programování“ v HTML a CSS

I bez úprav logiky serverového skriptu lze lecčeho dosáhnout samotným CSS.

Komentáře