13 Tooltipy
Zdrojové CSS: /src/css/atoms/_tooltip.scss
Zdrojové JS: /src/js/components/_tooltip.coffee
K zobrazení tooltipu se využívá plugin Tipso. Vložením classy .tooltip na jakýkoliv element se na hoveru / touch eventu zobrazí bublina. V našem případě se obsah bubliny natahuje z atributu title, ale lze načítat ajaxový požadavek či obsah jiného elementu.
Pro zvýraznění odkazu slouží atom tooltip-link, který pouze zvýrazní klíčové slovo. Pokud bychom chtěli mít aktivní i tento odkaz, pak přesuňte classu tooltip na .tooltip-link
<p>
Etiam at urna sollicitudin, suscipit libero at, tellus. <a href="#" class="tooltip-link tooltip tipso_style">Pellentesque sodales <span class="icon icon-question-circle"></span></a>, dui ac consectetur consequat, nisi mi feugiat urna, in vestibulum velit urna in justo. Aliquam a facilisis tortor.
</p>Etiam at urna sollicitudin, suscipit libero at, tellus. Pellentesque sodales , dui ac consectetur consequat, nisi mi feugiat urna, in vestibulum velit urna in justo. Aliquam a facilisis tortor.
K zobrazení tooltipu se využívá plugin Tipso. Vložením classy .tooltip na jakýkoliv element se na hoveru / touch eventu zobrazí bublina. V našem případě se obsah bubliny natahuje z atributu title, ale lze načítat ajaxový požadavek či obsah jiného elementu.
Pro zvýraznění odkazu slouží atom tooltip-link, který pouze zvýrazní klíčové slovo. Pokud bychom chtěli mít aktivní i tento odkaz, pak přesuňte classu tooltip na .tooltip-link