Tooltip - je to pop-up nápověda, která uživateli poskytuje další informace o prvku rozhraní. Bootstrap 5 poskytuje jednoduchý a elegantní způsob, jak přidat tooltip k prvkům na webové stránce.
V této příručce se podíváme, jak přidat tooltip do Bootstrap 5 pomocí vestavěné komponenty tooltip a pomocí JavaScriptu. Ukážeme také některé příklady a upravíme různé parametry tooltip pro vytvoření jedinečného vizuálního vzhledu a chování.
Přidání tooltip do Bootstrap 5 docela jednoduché. Můžeme použít atribut data-bs-toggle="tooltip" pro položku, ke které je třeba přidat nápovědu. Poté pomocí atributu title, označíme text, který se zobrazí ve vyskakovací výzvě.
Co je tooltip v bootstrap 5
Tooltip může obsahovat text, obrázek nebo jakýkoli jiný obsah. Je užitečný, když je nutné uživateli poskytnout další vysvětlení o funkčnosti nebo popisu položky, aniž by se zaplnilo hlavní rozhraní.
V Bootstrap 5 je tooltip implementován pomocí JavaScriptu a CSS. Prvek, do kterého chcete přidat tooltip, musí mít atribut data-bs-toggle="tooltip", který naznačuje potřebu použít pop-up nápovědu. Atribut title nastaví text výzvy, který se zobrazí při najetí na položku.
Bootstrap 5 poskytuje možnost přizpůsobit vzhled tooltip pomocí různých tříd a možností, jako je poloha, šířka, animace atd. d.
Přidání tooltip do bootstrap 5 vám umožní zvýšit použitelnost interaktivních prvků webové stránky a učinit uživatelský zážitek informativnějším a přehlednějším.
Proč používat tooltip v bootstrap 5
Tooltip lze použít pro:
- Vysvětlení funkčnosti prvků rozhraní pomocí vyskakovacího textu.
- Zobrazit další podrobnosti při navádění na určité prvky.
- Označování určitých podmínek nebo chyb pomocí tektuových štítků.
S tooltip v Bootstrap 5 můžete zlepšit uživatelskou zkušenost a učinit webovou stránku informativnější a srozumitelnější pro uživatele.
Jak přidat tooltip do bootstrap 5
Bootstrap 5 poskytuje snadný a efektivní způsob, jak přidat pop-up výzvy (tooltip) na položky vašeho webu nebo aplikace.
Chcete-li přidat tooltip do bootstrap 5, měli byste na cílové položce použít atribut data-bs-toggle="tooltip" a poté nastavit text výzvy pomocí atributu title .
Chování tooltip můžete také upravit pomocí dalších atributů a tříd bootstrap 5, například určit polohu tooltip pomocí atributu data-bs-placement .
Příklad kódu s nastavením polohy tooltip:
Kromě toho můžete JavaScript také použít k nastavení tooltip, například ke změně zpoždění zobrazení pomocí metody data-delay .
Příklad kódu s nastavením zpoždění zobrazení tooltip:
Nyní můžete tooltip snadno přidat na svůj web nebo aplikaci pomocí bootstrap 5!
Příklady použití tooltip v bootstrap 5
Zde je několik příkladů použití tooltip v Bootstrap 5:
Příklad 1:
Pop-up nápověda při přejetí na tlačítko:
Umístěte kurzor pro zobrazení nápovědy
Příklad 2:
Vyskakovací nápověda při najíždění na obrázek:
Příklad 3:
Pop-up tip s dlouhým textem:
Text s pop-up výzvou
Příklad 4:
Pop-up nápověda s obsahem HTML:
Umístěte kurzor pro zobrazení nápovědy
Příklad 5:
Pop-up nápověda při kliknutí na text odkazu:
Tooltip s textem
V Bootstrap 5 je nutné k přidání tooltip s textem použít atribut data-bs-tooltip spolu s třídou "tooltip" a příslušným selektorem.
Všimněte si, že odkaz má třídu "tooltip" a atribut data-bs-tooltip s textem, který se zobrazí v Tooltip, když najedete kurzorem.
Tooltip s obrázkem
Do Bootstrap 5 lze snadno přidat tooltip s obrázkem pomocí atributu data-bs-tooltip a stylů z knihovny.
Chcete-li začít, přidejte odkaz nebo tlačítko, které uživatel bude moci načíst, aby viděl tooltip:
Poté vytvoříme blok tooltip, který bude obsahovat obrázek:
Это tooltip с изображениемVšimněte si tříd tooltip , tooltip-image a tooltip-text , které jsou uvedeny v bloku obrázku. Umožňují přizpůsobit styly tooltip bloku a jeho obsahu.
Nakonec, když umístíte kurzor na odkaz nebo tlačítko, uživatel uvidí tooltip s obrázkem a textem uvedeným v bloku tooltip-text .
Tooltip s odkazem
Bootstrap vám umožňuje přidat tooltip s odkazem na položky na stránce. K tomu je nutné použít atribut data-bs-toggle="tooltip" a atribut title s textem nápovědy. Můžete také zadat atribut data-bs-placement k určení polohy tooltip.
V tomto příkladu se po najetí kurzoru na odkaz zobrazí tooltip s textem "Klikněte zde".
Tooltip na různých prvcích
Tooltip lze použít na různé prvky webové stránky. Níže jsou uvedeny příklady použití tooltip s různými prvky:
| Prvek | Příklad |
|---|---|
| Odkaz | Umístěte kurzor pro zobrazení tooltip |
| Tlačítko | Umístěte kurzor pro zobrazení tooltip |
| Obraz | |
| Vstupní pole |
Tooltip lze použít na jakýkoli prvek, který podporuje atributy data-bs-toggle a title . Jednoduše přidejte tyto atributy do položky a zadejte text pro tooltip do atributu title .