Boost JS Tooltip

A style-free tooltip plugin for jQuery and Boost JS. While other plugins style your tooltip for you, this plugin only handles the functionality, leaving the layout styling up to you.

Installation

Install with npm:

npm install boost-js-tooltip

Install in browser:

<script src="https://cdn.rawgit.com/marksmccann/boost-js-tooltip/v0.0.1/dist/tooltip.min.js"></script>

Usage

Create Plugin

var boost = require('boost-js');
// var boost = $.fn.boost; (browser install)

var tooltip = require('boost-js-tooltip');
// var tooltip = $.fn.boost.tooltip; (browser install)

$.fn.tooltip = boost( tooltip.plugin, tooltip.defaults );

Markup Structure

<button id="tooltip" title="Your tooltip message goes here">...</button>

Instantiate Plugin

$('#tooltip').tooltip();

Options

Name	Default	Description
activeClass	"is-visible"	the class added to the tip when activated
tipClass	"tooltip"	a class added to tip and used to prefix placement class
placement	"top"	the position of the tip relative to the source. Options: top, left, right, center.
margin	10	the number of pixels from the source element
onShow	null	a callback function called after the tooltip is made visible
onHide	null	a callback function called after the tooltip is hidden
onInit	null	a callback function called after the tooltip is initialized

Usage

$('#tooltip').tooltip({
    onInit: function() {
        console.log( this.id ); // 'tooltip'
    }
});

- or -

<button id="tooltip" ... data-placement="bottom">...</button>

API

show( fn )

Shows the tooltip. fn: optional callback function called after opening.

instance.show();

hide( fn )

Hides the tooltip. fn: optional callback function called after closing.

instance.hide();

isVisible()

Determines if tooltip is visible or not.

instance.isVisible();

setPosition()

Calculates the sets the top/left position for the tip element.

instance.setPosition();

title

Stores the original value of the title attribute.

instance.title;

tip

The tooltip element.

instance.tip;

Running Tests

$ npm install && npm test

License

Copyright © 2016, Mark McCann. Released under the MIT license.