Vlastní styl bubliny title

Jaké jsou možnosti pro vlastní vzhled nápovědy, která se objevuje při vyplnění atributu title.

Č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>

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:

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

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

Autor se webdesignu intensivněji věnuje od roku 2005. V poslední době se zabývá hlavně tvorbou responsivních webů a frontendem. Od roku 2013 o tom píše na webu jecas.cz.

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 3

Přehled komentářů

k Takže vlastně nic
donny
bubbahotep Re:
Zdroj: https://www.zdrojak.cz/?p=18447