Skip to content

Latest commit

 

History

History
110 lines (74 loc) · 2.97 KB

README.md

File metadata and controls

110 lines (74 loc) · 2.97 KB
Raw

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

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