Tooltip.js – Dead simple Tooltips, powered by Popper.js

Tooltip.js

Create dead simple Tooltips with Tooltip.js, which uses the positioning engine Popper.js. The respective library, which is written by the same author, is already included in this script. So you don’t have any further dependencies! The script itself is compatible with all modern browsers, including the 10+.

With Tooltip.js you own a flexible, responsive and configurable Tooltip library. It offers also a complete accesible environment through the aria tags!

Download the latest version of tooltip.js as .ZIP or as .TAR package!

npm i tooltip.js --save

yarn add tooltip.js --save

bower install tooltip.js --save

Instructions

The package itself is filled with JavaScript files, and each single file is also available in a minified version AND with a respective Source Map. The AMD / UMD Module- and ECMAScript (ES) Module-Written version are separated into an files (within a sub-directory).

 

Load Tooltip.js

Just link the main JavaScript file directly after the opened <body> tag and append your own Script below. The package itself doesn’t contain any stylesheet, so the design is completely up to you!

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <!-- Required JavaScript -->
        <script type="text/javascript" src="/js/tooltip.min.js"></script>
    </body>
</html>

 

Configure Tooltip.js

The current version of this library offers 13 options to configure the behavior as well as the design of your Tooltips. It is highly recommended to check out the official documentation to learn more about the options and the available methods!

document.addEventListener("DOMContentLoaded", {
    var tooltip = new Tooltip(document.querySelector(".tooltip"), {
        placement:              "top",
        arrowSelector:          ".tooltip-arrow",
        innerSelector:          ".tooltip-inner",
        container:              false,
        delay:                  0,
        html:                   false,
        template:               '<div class="tooltip" role="tooltip">'
                              + '  <div class="tooltip-arrow"></div>'
                              + '  <div class="tooltip-inner"></div>'
                              + '</div>',
        title:                  "",
        trigger:                "hover focus",
        closeOnClickOutside:    false,
        boundariesElement:      "",
        offset:                 0,
        popperOptions:          {}
    });
});

 

Configure: Options

placement
Placement of the popper accepted values: top(-start, -end), right(-start, -end), bottom(-start, -end), left(-start, -end).
arrowSelector
.tooltip__arrow – className used to locate the DOM arrow element in the tooltip.
innerSelector
.tooltip__inner – className used to locate the DOM inner element in the tooltip.
container
Append the tooltip to a specific element.
delay
Delay showing and hiding the tooltip (ms) – does not apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: { show: 500, hide: 100 }.
html
Insert HTML into the tooltip. If false, the content will inserted with textContent.
template
Base HTML to used when creating the tooltip. The tooltip’s title will be injected into the .tooltip-inner or .tooltip__inner. .tooltip-arrow or .tooltip__arrow will become the tooltip’s arrow. The outermost wrapper element should have the .tooltip class.
title
Default title value if title attribute isn’t present.
trigger
How tooltip is triggered – click, hover, focus, manual. You may pass multiple triggers; separate them with a space. manual cannot be combined with any other trigger.
closeOnClickOutside
Close a popper on click outside of the popper and reference element. This has effect only when options.trigger is click.
boundariesElement
The element used as boundaries for the tooltip.
offset
Offset of the tooltip relative to its reference.
popperOptions
Popper options, will be passed directly to popper instance.

Leave a Reply

Top