Design systém gov.cz4.6.0

Tooltip

Tooltip nebo-li nápověda je stručná informace, která je připojena k určitému prvku (např. ikoně, symbolu, textu apod.) . Zobrazuje se ve chvíli, kdy uživatel najede myší nebo klávesnicí na daný prvek. Důležitým aspektem tooltipu je, že jej spouští uživatel. Bez tohoto aspektu, bychom hovořili o komponentě zpráva, která informaci zobrazuje permanentně.

Na dotykových obrazovkách se kvůli charakteru ovládání nápověda nepoužívá a je nahrazovaná např. vyskakovacími tipy (popup tips).

Zobrazení tooltipu

Použití

  • Nepoužívejte nápovědu pro informace, které jsou zásadní pro dokončení úkolu.
    Nápověda se používá pro doplňující vysvětlení daného pole formuláře či textu, které uživatelé neznají, případně jako zdůvodnění toho, co se může zdát jako neobvyklý požadavek.

  • Nápověda obsahuje pouze stručný a užitečný obsah.
    Přidejte nápovědu pouze, pokud máte k dispozici užitečný obsah, jindy ne, protože nadbytečnými informacemi snižujete celkovou srozumitelnost textu.

  • Do nápovědy lze vložit odkaz.
    Nápověda se zobrazuje najetím na označený prvek. Pokud na daný prvek kliknete, dojde k zafixování okna s nápovědou. Díky tomu je možné do textace nápovědy vkládat odkazy, případně textaci zkopírovat.

  • Dbejte na to, aby nápověda byla přístupná i pomocí klávesnice.
    Pro zachování přístupnosti je nezbytné, aby nápověda byla ovladatelná i pomocí klávesnice. Myslete na ostatní, kteří jsou limitovaní v používání myši, případně se dostanou do situace, kdy není možné ji použít.

  • Používejte vodítka, ke kterému prvku se nápověda váže.
    Vyhnete se tak nedorozumění v případě, pokud je více prvků u sebe a nápověda se zobrazuje u všech.

  • Nepoužívejte nápovědu u prvku, který se již ovládá akcí uživatele.
    Pokud máte prvek např. akordeon, který se při kliknutí rozbaluje, nevkládejte do jeho nadpisu nápovědu. Dojde ke kolizi v ovládání prvků.

  • Dodržujte konzistentnost používání nápovědy na celém webu.
    Pokud se rozhodnete poskytovat nápovědu u daného typu prvků, dodržujte tuto praxi na celém webu.

Doporučení

  • Zvažte používání nápovědy u všech ikon, vyhnete se tak významové nejednoznačnosti zobrazovaného symbolu.
  • Ujistěte se, že nápověda má dostatečný kontrast vůči pozadí.
  • Umístěte nápovědu tak, aby neblokovala související obsah.