Tooltip

Soms is het handig om een "Tooltip" te plaatsen aan een woord, een stukje tekst, aan een afbeelding of aan een button, etc. Met Uikit is dit simpel te realiseren en daarnaast kan je het er aantrekkelijk uit laten zien. Tooltips zijn handig en hierin kan je extra informatie verstrekken. Tooltips zijn op websites onmisbaar voor mensen met een visuele beperking (blinden en slechtzienden)!

Gebruik

Om "Tooltip" te gebruiken voeg je het attribute  data-uk-tooltip toe aan een element en ook het title attribute met de inhoud (tekst) van je tooltip.

Voorbeeld
Hieronder een "Tooltip" over een Button, een "Tooltip" over een stukje tekst en over een link en gecombineerd een link in een button met daaroverheen een "Tooltip".

Muis mij ook

iFred

iFred

Markup

Hieronder staat de code van de hierboven gegeven voorbeelden

<button class="uk-button" title="Gelukt!" data-uk-tooltip="">Muis mij</button>

<span title="Ook gelukt!" data-uk-tooltip="">Muis mij ook</span>

<a href="http://www.ifred.nl" title="de iFred Foundation">iFred</a>

<a href="http://www.ifred.nl" class="uk-button" title="de iFred Foundation">iFred</a>

Uitlijning Tooltip

Je kan de Tooltip naar wens plaatsen boven, onder, zijkant, links rechts en een combinatie daarvan. Om dit te doen kan je een van onderstaande opties toevoegen aan het data-uk-tooltip attribute.

Attribute Beschrijving Voorbeeld
pos:'top' Tooltip top-midden.
pos:'top-left' Tooltip top-links.
pos:'top-right' Tooltip top-rechts.
pos:'bottom' Tooltip onder-midden.
pos:'bottom-left' Tooltip onder-links.
pos:'bottom-right' Tooltip onder-rechts.
pos:'left' Tooltip zijkant-links.
pos:'right' Tooltip zijkant-rechts.

Markup

<button class="uk-button" title="t-m" data-uk-tooltip="{pos:'top'}">top-midden<br /></button>
<button class="uk-button" title="t-l" data-uk-tooltip="{pos:'top-left'}">top-links<br /></button>
<button class="uk-button" title="t-r" data-uk-tooltip="{pos:'top-right'}">top-rechts<br /></button>
<button class="uk-button" title="o-m" data-uk-tooltip="{pos:'bottom'}">onder-midden<br /></button>
<button class="uk-button" title="o-l" data-uk-tooltip="{pos:'bottom-left'}">onder-links<br /></button>
<button class="uk-button" title="o-r" data-uk-tooltip="{pos:'bottom-right'}">onder-rechts<br /></button>
<button class="uk-button" title="z-l" data-uk-tooltip="{pos:'left'}">zijkant-links<br /></button>
<button class="uk-button" title="z-r" data-uk-tooltip="{pos:'right'}">zijkant-rechts<br /></button>