Soft Tooltips

A Simple Tooltip Module

Installation

Install @softheartengineer/soft-tooltips with npm

  npm install @softheartengineer/soft-tooltips

Usage/Examples

import { Tooltip } from '@softheartengineer/soft-tooltips';

const tooltip = new Tooltip();

// HTML Element getter
const button1 = document.getElementById('some-button-1');
const button2 = document.getElementById('some-button-2');
const button3 = document.getElementById('some-button-3');
const button4 = document.getElementById('some-button-4');

// Tooltip element with image
let customElement = document.createElement('img');
customElement.src =
  'https://steamcdn-a.akamaihd.net/steam/apps/2581610/header.jpg';

// USAGE
tooltip.onHover(button1, customElement, {
  placement: 'bottom',
  marginTop: 4,
  delay: 100,
});
tooltip.onHover(button2, 'Top Tooltip', {
  placement: 'top',
  marginBottom: 8,
});
tooltip.onHover(button3, 'Left Tooltip', {
  placement: 'left',
  marginRight: 4,
});
tooltip.onHover(button4, 'Right Tooltip', {
  placement: 'right',
  marginLeft: 4,
});

Demo

Tooltip Configuration Reference

| Events | Type | | :------------- | :------------ | | placement | string | | marginLeft | number (px) | | marginRight | number (px) | | marginTop | number (px) | | marginBottom | number (px) | | delay | number (ms) | | hidingDelay | number (ms) |

Contributing

Contributions are always welcome!.

Authors

• @JaydevVadachhak

Support

For Support, email [email protected] and follow @softheartengineer.