Tooltips

Tooltips for DOM elements

    types

    effects

    custom event triggers

    Download latest stable

    loading

    Standalone build 13.6 KB Repository loading

    Introduction

    Tooltips is a Tooltip wrapper that provides simple bindings for DOM elements with data-{key} attributes.

    Tooltips can use mutation observers to handle dynamic elements, but also provides a fallback methods when you need to support older browsers.

    It works by attaching events defined in showOn & hideOn options to each element with data-{key} attribute. This is way better for performance than attaching these events to container and handling them for all elements on a page. Especially in case of events like mouseenter & mouseleave, which are the main focus of this library.

    To save memory, Tooltip instances are created only when first showOn event is fired.

    Compatibility

    Browser support starts at IE8+, with an exception of automatic binding to dynamic elements via Mutation Observers, which are used only when supported. Mutation Observers have been implemented in all modern browsers and IE11.

    If you want to support browsers without Mutation Observers, you can fall back to .reload() method, or manage dynamic elements as you add & remove them with .add() & .remove() methods.

    Changelog

    Upholds the Semantic Versioning Specification.

    Support

    Reward the developer

    And make him happy for maintaining this library! :)

    I don't want to monetize my libraries as I want them to be accessible to everyone with any budget. That being said, free software isn't free, it's just paid by with developer's time, and right now I could use some help :)

    Installation

    Tooltips is a component:

    component install darsain/tooltips

    The standalone build of a latest version is available at:

    When isolating issues on jsfiddle, use the tooltips.js URL above.

    Usage examples

    When using component:

    var Tooltips = require('tooltips');

    Create a Tooltips instance using document as a container with all default options:

    var tips = new Tooltips(document, {
    	tooltip:    {},          // Options for individual Tooltip instances.
    	key:       'tooltip',    // Tooltips data attribute key.
    	showOn:    'mouseenter', // Show tooltip event.
    	hideOn:    'mouseleave', // Hide tooltip event.
    	observe:   0             // Enable mutation observer (used only when supported).
    });

    You can see available Tooltip options in Tooltip API documentation.

    This binds tooltips to elements with data-tooltip attribute residing inside document. Example element:

    <div data-tooltip="This is a tooltip!">hover to display</div>

    You can also customize each tooltip options with additional data attributes:

    <div data-tooltip="This is a tooltip!" data-tooltip-place="right">shows on right</div>
    <div data-tooltip="Something happened!" data-tooltip-type="error">oh noes</div>

    Dynamic elements

    When you are dynamically adding/removing elements from DOM and you have a freedom to target only browsers that support Mutation Observer, just enable the observer option and Tooltips will take care of the rest.

    If you need to support older browsers, you have a few options.

    1. Call .reload() method when some change to DOM happens:

    document.body.appendChild(newElement);
    tips.reload();

    2. Notify Tooltips about added/removed elements with .add() and .remove() methods:

    document.body.appendChild(newElement);
    tips.add(newElement);
    document.body.removeChild(newElement);
    tips.remove(newElement);

    These methods check whether newElement or any of it's children has data-{key} attributes, and handle the needed changes.

    The second method is way more efficient.

    Documentation

    Documentation is centralized in the Tooltips' Repository Wiki, which makes it easy to maintain and keep always up to date.