Package Exports

codex-tooltip

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (codex-tooltip) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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