impact-blue / codex.tooltips

JavaScript module to add custom tooltips to any element

codex.tooltips

Lightweight JavaScript module for adding tooltips with custom content to any HTML element

Installation

First, install it via package manager:

yarn add codex-tooltip

npm install codex-tooltip

Then, include tooltips to your script, create an instance and call hiding/showig methods:

import Tooltip from 'codex.tooltip';

const tooltip = new Tooltip();

tooltip.show(targetElement, 'Tooltip text');

Usage

There are two main methods: show() and hide()

Show

Method shows tooltip with custom content on passed element

tooltip.show(element, content, options);

parameter	type	description
element	HTMLElement	Tooltip will be showed near this element
content	String or Node	Content that will be appended to the Tooltip
options	Object	Some displaying options, see below

Available showing options

name	type	action
placement	top, bottom, left, right	Where to place the tooltip. Default value is `bottom'
marginTop	Number	Offset above the tooltip with top placement
marginBottom	Number	Offset below the tooltip with bottom placement
marginLeft	Number	Offset at left from the tooltip with left placement
marginRight	Number	Offset at right from the tooltip with right placement
delay	Number	Delay before showing, in ms. Default is 70
hidingDelay	Number	Delay before hiding, in ms. Default is 0

Hide

Method hides the Tooltip.

tooltip.hide();

Example

import Tooltip from 'codex.tooltip';

const tooltip = new Tooltip();
const someButton = document.getElementById('some-button');

someButton.addEventListener('mouseenter', () => {
  tooltip.show(someButton, 'Button helper');
});

someButton.addEventListener('mouseleave', () => {
  tooltip.hide();
});

In example above we show tooltip near some button by "mouseenter" and hide by "mouseleave". For this events you can also use the onHover() decorator:

import Tooltip from 'codex.tooltip';

const tooltip = new Tooltip();
const someButton = document.getElementById('some-button');

tooltip.onHover(someButton, 'Button helper', {
  placement: 'right',
  delay: 150
})

CodeX

This tool is made by CodeX.

https://codex.so

https://twitter.com/codex_team