Basic overview


To see the tooltip, place the cursor on the link below.

Tooltips may be attached to any element. When you hover the cursor over the element, attribute title is displayed in a small window next to the item.
<span class="tooltip" title="_HINT TEXT_">...</span>

Additional parameters

  • data-tooltip-classes="..."  -  additional classes of the tooltip (classes are separated by space!).
  • data-tooltip-position="..." - tooltip position (top, right, bottom and left)
  • data-tooltip-content="..." -  JS function is added, which returns tooltip content 
  • data-tooltip-element="..." - is set by #id or .class of the element. Its HTML will be used as the tooltip content. 

Adding the class


<span class="tooltip" title="_TOOLTIP TEXT_" data-tooltip-classes="_TOOLTIP CLASS_">...</span>

Tooltip positions


<span class="tooltip" title="_TOOLTIP TEXT_" data-tooltip-position="top">...</a>
<span class="tooltip" title="_TOOLTIP TEXT_" data-tooltip-position="bottom">...</a>
<span class="tooltip" title="_TOOLTIP TEXT_" data-tooltip-position="left">...</a>
<span class="tooltip" title="_TOOLTIP TEXT_" data-tooltip-position="right">...</a>

Сontent of the function


Tooltips can display tooltip content using JavaScripts functions. When you hover the cursor over an item, the function taken from the atribute data-tooltip-content="..." will be launched. It will return the tooltip content.
<span class="tooltip" data-tooltip-content="_FUNCTION NAME_">...</span>

<script>
    function _FUNCTION NAME_(){
        return ...; 
    }
</script>

Element content


Tooltips can display the content of another element. When you hover the cursor over an element, its internal code specified in the atribute data-tooltip-element = "..." will be taken.
Hooray! I see the tooltip using another element content
<span class="tooltip" data-tooltip-element="#_ELEMENT IDENTIFIER_">...</span>

<div id="_ELEMENT IDENTIFIER_">...</div>

Tooltip settings


Color alternative

.success | .warning | .error | .info
<span class="tooltip" title="_TOOLTIP TEXT_" data-tooltip-classes="success">...</span>
<span class="tooltip" title="_TOOLTIP TEXT_" data-tooltip-classes="warning">...</span>
<span class="tooltip" title="_TOOLTIP TEXT_" data-tooltip-classes="error">...</span>
<span class="tooltip" title="_TOOLTIP TEXT_" data-tooltip-classes="info">...</span>

Size

.larger | .large | .small
<span class="tooltip" title="_TOOLTIP TEXT_" data-tooltip-classes="larger">...</span>
<span class="tooltip" title="_TOOLTIP TEXT_" data-tooltip-classes="large">...</span>
<span class="tooltip" title="_TOOLTIP TEXT_" data-tooltip-classes="small">...</span>