Tooltips

The tooltips are initialized automatically by simply adding a class .tooltip to the desired item.

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 location (top, right, bottom и 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

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

Tooltip location

Show the tooltip Show the tooltip | Show the tooltip | Show the tooltip
<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>

Share with your friends

Google+