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.