Shortcodes

Tooltips

Easily create a nicely looking tooltip.

Usage

To apply this component, add the data-uk-tooltip attribute to an element. You also need to add a title attribute, whose value will represent your tooltip's text.

Example

Hover me

Markup

<button class="uk-button" data-uk-tooltip title="">...</button>
<span data-uk-tooltip title="">...</span>

Alignment

Add one of the following options to the data-uk-tooltip attribute to adjust the tooltip's alignment.

AttributeDescriptionExample
pos:'top' Aligns the tooltip to the top.
pos:'top-left' Aligns the tooltip to the top left.
pos:'top-right' Aligns the tooltip to the top right.
pos:'bottom' Aligns the tooltip to the bottom.
pos:'bottom-left' Aligns the tooltip to the bottom left.
pos:'bottom-right' Aligns the tooltip to the bottom right.
pos:'left' Aligns the tooltip to the left.
pos:'right' Aligns the tooltip to the right.

Markup

<button class="uk-button" data-uk-tooltip="{pos:'bottom-left'}" title="">...</button>

JavaScript options

This is an example of how to set options via attribute:

data-uk-tooltip="{pos:'bottom-left'}"
OptionPossible valueDefaultDescription
offset integer 5 Offset to the source element
pos string 'top' Tooltip position
animation boolean false Fade in tooltip
delay integer 0 Delay tooltip show in ms
cls string '' Custom class to add on show

Une Église qui vit la réconciliation et propage l’amour de Christ tant dans ses réunions, ses cultes et ses projets que dans ses relations.

Une communauté chrétienne d’arrière-plan protestant se voulant œcuménique.

Most Popular News