boost-js-tooltip v0.0.1

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

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.