popover-element

Tooltip

Create simple or advanced, high performant Tooltips with minimal javascript and markup. This library is built using native vanilla javascript which means super fast performance. Supports IE10+, all major browsers and even mobile.

Usage

Create your Tooltip html:

<div class="my-tooltip">My Tooltip Content</div>
<button class="my-tooltip-toggle-btn">Toggle</button>

The add your css:

 
.my-tooltip {
    display: none;
}
 
.my-tooltip-active {
    display: block;
}

Then activate your tooltip with the following:

var tooltip = new Tooltip({
    el: document.body.querySelector('.my-tooltip'),
    activeClass: 'my-tooltip-active',
    triggerClass: 'my-tooltip-toggle-btn'
});
 
tooltip.show(); // show the tooltip
tooltip.hide(); // hide the tooltip