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 topplacement | | marginBottom | _Number_ | Offset below the tooltip withbottomplacement | | marginLeft | _Number_ | Offset at left from the tooltip withleftplacement | | marginRight | _Number_ | Offset at right from the tooltip withrightplacement | | delay | _Number_ | Delay before showing, in ms. Default is70| | hidingDelay | _Number_ | Delay before hiding, in ms. Default is0` |

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
})

About CodeX

CodeX is a team of digital specialists around the world interested in building high-quality open source products on a global market. We are open for young people who want to constantly improve their skills and grow professionally with experiments in cutting-edge technologies.

| 🌐 | Join 👋 | Twitter | Instagram | | -- | -- | -- | -- | | codex.so | codex.so/join |@codex_team | @codex_team |