Článek původně vyšel na autorově webu Je čas.

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říklad:

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

Č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 napozicovat nad slovo:

  <style>
    span[title] {position: relative; border-bottom: 1px dotted #000; cursor: help}
    span[title]:hover:after {border: 1px solid #0D6AB7; color: #fff; border-radius: .2em; background: #1081DD; content: attr(title); position: absolute; top: -2em; left: 0; padding: 0 .2em; width: 8em}
  </style>
  <p>Tento <span title="Nějaký text">text</span> má atribut <code>title</code>.</p>

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:

  <style>
    span[vlastni-title] {position: relative; border-bottom: 1px dotted #000; cursor: help}
    span[vlastni-title]:hover:after {border: 1px solid #0D6AB7; color: #fff; border-radius: .2em; background: #1081DD; content: attr(vlastni-title); position: absolute; top: -2em; left: 0; padding: 0 .2em; width: 8em}
  </style>  
  <p>Tento <span vlastni-title="Nějaký text">text</span> má atribut <code>vlastni-title</code>.</p>

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í:

• Popisek obrázku (používá čisté CSS)
• Simptip (používá jen CSS, místo title se používá vlastní atribut)
• Zepto Tooltip (popisek postavený nad frameworkem Zepto, demo)
• Opentip (používá jQuery a místo title vlastní atribut)
• 40+ různých tooltip skriptů

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í.