hcg-tooltip

Facebook-style tooltips for vanilla JavaScript. Zero dependencies.

• GitHub: github.com/html-code-generator/hcg-tooltip
• npm: npmjs.com/package/@html-code-generator/hcg-tooltip
• Documentation & demo: html-code-generator.com/javascript/tooltip-library

Install

npm install @html-code-generator/hcg-tooltip

Quick start

Bundler (webpack, Vite, etc.):

import hcgTooltip from '@html-code-generator/hcg-tooltip';
import '@html-code-generator/hcg-tooltip/hcg-tooltip.css';

hcgTooltip('.has-tip');

CommonJS:

const hcgTooltip = require('@html-code-generator/hcg-tooltip');
require('@html-code-generator/hcg-tooltip/hcg-tooltip.css');

Script tag (CDN):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@html-code-generator/hcg-tooltip@1/hcg-tooltip.css">
<script src="https://cdn.jsdelivr.net/npm/@html-code-generator/hcg-tooltip@1/hcg-tooltip.js"></script>

<a href="#" title="Hello!" class="has-tip">Hover me</a>
<script>
  hcgTooltip('.has-tip');
</script>

Basic usage

<a href="#" title="Hello!" class="has-tip">Hover me</a>

hcgTooltip('.has-tip');

Data attributes

<button type="button" data-hcg-tooltip title="Hello!">Hover me</button>
<script>
  hcgTooltip.initFromData();
</script>

Options

hcgTooltip('.has-tip', {
  gravity: 'n',      // n | s | e | w | nw | ne | sw | se
  delayIn: 0,
  delayOut: 0,
  trigger: 'hover',  // hover | focus | manual
  html: false,
  live: false,
  offset: 0,
  opacity: 0.8,
});

Manual trigger

const tooltip = hcgTooltip('#my-el', { trigger: 'manual', gravity: 's' });
tooltip.show();
tooltip.hide();

Instance API

const tip = hcgTooltip.get(element);
tip.show();
tip.hide();
tip.destroy();

Documentation

Full API reference, live demos, React/Vue examples, theming, and migration guide from jQuery Tipsy:

https://www.html-code-generator.com/javascript/tooltip-library

License

MIT - see LICENSE.