Tooltip & Popover (version 0.0.2)

This Tooltip and Popover scripts are taken from the twitter-bootstrap-js modules. The stylesheets are based on twitter-bootstrap-less modules and are extended with IS24 custom styles.

Tooltip

Is a simple black boxes with arrows targeting a html element which are displayed on hover.

Demo

HTML

<button type="button" class="button margin-right" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

JS

$(function () {
  $('[data-toggle="tooltip"]').tooltip({container: 'body'});
});

Resources

<link rel="stylesheet" href=""/>
<script src=""></script>

full documentation

Popover

Is a box with an optional title and a arrow targeting a html element.

Demo

HTML

<!-- placement bottom with title  -->
<button type="button" class="button popoverTrigger" data-toggle="popover" title="Popover title" data-placement="bottom" data-content="And here's some amazing content. It's very engaging. Right?">Popover with title</button>

<!-- placement left without title -->
<button type="button" class="button margin" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on left</button>

JS

The popoverTrigger.js is a custom script to enable a better open close behaviour. The function popoverTrigger can take any kind of jQuery selector as parameter. It is not necessary to have the popover trigger in the DOM on the function call time. It will listen on the body for any click events on the given selectors and open/close the popover.

$(function () {
  $.popoverTrigger('[data-toggle="popover"]');
});

Resources

The popover.js depends on the tooltip.js so we need to load both and the popoverTrigger.js.

<link rel="stylesheet" href=""/>
<script src=""></script>

full documentation