Skip to main content
live This is a new website – your feedback will help us to improve it.

Tool-Tip

Overview

The Style Kit includes a customised version of the Bootstrap tool-tip plugin to be compatible with Style Kit specific classes. It’s functionality and data API remain exactly the same.

Tool-tip’s are not enabled globally. You will need to add the code from the activation section to use them.

View Tool-Tip Plugin

Dependencies

This plugin depends upon:

See distribution for how to include these dependencies.

Activation

To enable any element with a data-toggle="tooltip" attribute as a tool-tip, include this JavaScript code after the Style Kit’s JavaScript file.

jQuery(document).ready(function() {
  jQuery('[data-toggle="tooltip"]').tooltip()
});

Uses

In most cases tool-tips should be avoided as they are hard to make accessible, do not work well on mobiles or small devices and are not more discoverable than regular title attributes.

Wherever possible title attributes should be used as they are part of the HTML standard.

Examples

<button class="bsk-btn bsk-btn-default" type="button" data-toggle="tooltip" data-placement="bottom" title="tooltip on the bottom" style="margin-bottom:20px;">Tooltip (bottom)</button>

Extra space is added below the button to fit into the example box.

An alternative using the title attribute alone.

<button class="bsk-btn bsk-btn-default" type="button" title="button with">Button with title</button>