Skip to content

JavaScript module to add custom tooltips to any element

License

Notifications You must be signed in to change notification settings

tomchandra/codex.tooltips

 
 

Repository files navigation

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

About

JavaScript module to add custom tooltips to any element

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 62.7%
  • CSS 14.1%
  • JavaScript 14.0%
  • HTML 9.2%