hcg-tooltip

A lightweight, zero-dependency JavaScript tooltip library inspired by jQuery Tipsy. Facebook-style dark bubbles with directional arrows, CSS fade-in on open, delays, HTML content, focus/manual triggers, and live event delegation.

• 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

Features

• Zero dependencies, ~10 KB unminified
• UMD build — works with <script> tags, CommonJS, and bundlers
• Tipsy-compatible option names and defaults
• Accessible: role="tooltip" on the tip element

Demo

See the live documentation and interactive demo on the website:

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

Installation

Download

Download from this repository — use min/ for production or the root files for development:

<!-- Production (minified) -->
<link rel="stylesheet" href="min/hcg-tooltip.min.css">
<script src="min/hcg-tooltip.min.js"></script>

<!-- Development (readable source) -->
<link rel="stylesheet" href="hcg-tooltip.css">
<script src="hcg-tooltip.js"></script>

CDN

jsDelivr (npm):

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

unpkg:

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

jsDelivr (GitHub):

<!-- Production (minified) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/html-code-generator/hcg-tooltip@1.0.0/min/hcg-tooltip.min.css">
<script src="https://cdn.jsdelivr.net/gh/html-code-generator/hcg-tooltip@1.0.0/min/hcg-tooltip.min.js"></script>

<!-- Development (readable source) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/html-code-generator/hcg-tooltip@1.0.0/hcg-tooltip.css">
<script src="https://cdn.jsdelivr.net/gh/html-code-generator/hcg-tooltip@1.0.0/hcg-tooltip.js"></script>

Load CSS before JS for the best first-paint experience. The global hcgTooltip function is available immediately after the script loads.

npm

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

const hcgTooltip = require('@html-code-generator/hcg-tooltip');
// also import @html-code-generator/hcg-tooltip/hcg-tooltip.css in your bundler

Usage

Basic

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

<script>
  hcgTooltip('.has-tip');
</script>

Data attributes

<button type="button" data-hcg-tooltip title="Hello!">Hover me</button>
<button type="button" data-hcg-tooltip="Saved!">Hover me</button>

<script>
  hcgTooltip.initFromData();
</script>

Attribute	Maps to
data-hcg-tooltip	Enables tooltip; value = text (or use title if empty)
data-hcg-tooltip-gravity	gravity — n, s, e, w, nw, ne, sw, se
data-hcg-tooltip-trigger	trigger — hover, focus, manual
data-hcg-tooltip-delay-in	delayIn (ms)
data-hcg-tooltip-delay-out	delayOut (ms)
data-hcg-tooltip-offset	offset (px)
data-hcg-tooltip-opacity	opacity
data-hcg-tooltip-class	className on the tooltip bubble
data-hcg-tooltip-html	html — true or false
data-hcg-tooltip-fallback	fallback when text is empty

Options

hcgTooltip('.has-tip', {
  className: null,
  delayIn: 0,
  delayOut: 0,
  fallback: '',
  gravity: 'n',
  html: false,
  live: false,
  offset: 0,
  opacity: 0.8,
  title: 'title',
  trigger: 'hover',
});

Manual trigger

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

String commands are also supported: hcgTooltip('#my-el', 'show') and hcgTooltip('#my-el', 'hide').

Live delegation

hcgTooltip('.dynamic-tip', { live: true });

Instance API

const tip = hcgTooltip.get(element);

tip.show();
tip.hide();
tip.enable();
tip.disable();
tip.toggleEnabled();
tip.destroy();

Global helpers

hcgTooltip.defaults;
hcgTooltip.initFromData();
hcgTooltip.revalidate();
hcgTooltip.destroyAll();

Frameworks

Works in plain HTML, React, Vue, and other frameworks. Full React and Vue examples are on the documentation page.

Security

With html: true, tooltip content is inserted via innerHTML. Only use trusted markup — never pass unsanitized user input.

Migrating from jQuery Tipsy

jQuery Tipsy	hcg-tooltip
$('.x').tipsy()	hcgTooltip('.x')
$('.x').tipsy(true)	hcgTooltip.get(el) or hcgTooltip(el, true)
$('.x').tipsy('show')	hcgTooltip(el, 'show')
$.fn.tipsy.defaults	hcgTooltip.defaults
$.fn.tipsy.revalidate()	hcgTooltip.revalidate()
$('.x').tipsy({ live: true })	hcgTooltip('.x', { live: true })

License

MIT — see LICENSE.