ttip.js

Tooltips and popovers

Usage

Include style and js file:

...
<script type="text/javascript" src="../tooltip.js"></script>
<link rel="stylesheet" href="../tooltip.css" type="text/css">
...
        

Note: javascript file should be included after jQuery

Tooltips

Tooltips are activated when mouse pointer is placed over target element.

Add data-tooltip attribute to element on which tooltip should be shown. Tooltip will appear when pointer is over element. Hover HERE to see example.

<span data-tooltip="Oh, look! This is a tooltip!"
      data-ttip-position="top">
      ...
</span>
        

data-ttip-position attribute can be omitted, then tooltip will be placed automatically based on position of tooltipped element on the page. Also position can de defined explicitly. Possible values: top, bottom, right, left.

Tooltip position will be calculated dynamically, so it will fit into viewport event on the sides of the page

Popovers

Popovers can be shown/hidden by clicking on target element or by placing mouse pointer over target element. Inside popover you can place content of template element. Template element name could be passed with data-popover attribute.

Hover HERE to see and example.

Example code:

<!-- Popover template -->
<div data-popover-content="pop1">
    <div>Hello, this is <b>new</b> popover</div>
    <button>OK</button>
</div>
...
<!-- Target element -->
<span data-popover="pop1" data-ttip-position="top">...</span>
        

To show/hide popover by clicking on element add class toggle to target element.

Click HERE to see an example.

Example code:

<!-- Target element -->
<span data-popover="pop1" class="toggle">...</span>