+55 12 97404-9147

Tooltip

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
activeClass string 'uk-active' Toggled active class

ImprimirEmail

  • /index.php/12-features/13-modal
  • /index.php/12-features/11-utility

Venha conhecer a melhor praia de Ubatuba, venha para Itamambuca!

Informações legais

  • Aviso Legal
  • Política de Privacidade
  • termos e Condições
  • Política de reservas
  • Politica de reembolso

Boletim de Notícias

Inscreva-se para receber informações sobre ótimas ideias e promoções de férias

Copyright © 2015 Publmas | Todos os direitos reservados | Política de Privacidade | termos e Condições