JavaScript Tooltip Library - Live Demo

Interactive demos of hcg-tooltip, a zero-dependency JavaScript tooltip library and jQuery Tipsy alternative. Try gravity positioning, show/hide delays, HTML content, focus and manual triggers, data attributes, and live delegation - hover and focus the examples below. hcg-tooltip Documentation

Basic

Default north gravity, reads text from the title attribute.

Hover the links
North (default) Second link
View code 
hcgTooltip('.tip-basic');

Gravity

Eight positions: n, s, e, w, nw, ne, sw, se.

Hover each button
View code 
hcgTooltip('.tip-n',  { gravity: 'n'  });
hcgTooltip('.tip-s',  { gravity: 's'  });
hcgTooltip('.tip-e',  { gravity: 'e'  });
hcgTooltip('.tip-w',  { gravity: 'w'  });
hcgTooltip('.tip-nw', { gravity: 'nw' });
// ... ne, sw, se

Offset

offset sets the pixel gap between the target and the tooltip (default 0). All examples use gravity: 'n' so the gap is easy to see below each button.

Compare offset values (px)
View code 
hcgTooltip('.tip-offset-0',  { gravity: 'n', offset: 0 });
hcgTooltip('.tip-offset-8',  { gravity: 'n', offset: 8 });
hcgTooltip('.tip-offset-20', { gravity: 'n', offset: 20 });
hcgTooltip('.tip-offset-40', { gravity: 'n', offset: 40 });

Opacity

Tooltips fade in via CSS on open. opacity sets the target level (default 0.8).

Compare opacity values
View code 
hcgTooltip('.tip-opacity-40',  { opacity: 0.4 });
hcgTooltip('.tip-opacity-60',  { opacity: 0.6 });
hcgTooltip('.tip-opacity-80',  { opacity: 0.8 });  // default
hcgTooltip('.tip-opacity-100', { opacity: 1 });

Custom class

className adds extra CSS classes to the tooltip element - string or (el) => string.

Themed variants
Dynamic className callback
View code 
hcgTooltip('.tip-class-error',   { className: 'hcg-tooltip-error' });
hcgTooltip('.tip-class-success', { className: 'hcg-tooltip-success' });
hcgTooltip('.tip-class-info',    { className: 'hcg-tooltip-info' });

hcgTooltip('.tip-class-dynamic', {
  className: (el) => el.dataset.tipClass
});

Delays

delayIn and delayOut in milliseconds.

500ms in, 1000ms out
View code 
hcgTooltip('.tip-delay', { delayIn: 500, delayOut: 1000 });

HTML content

html: true renders markup from the title attribute. Compare with plain text when html: false (default).

html: false - escaped markup
html: true - rich markup
View code 
hcgTooltip('.tip-html-off', { html: false });  // default

hcgTooltip('.tip-html-bold',  { html: true });
hcgTooltip('.tip-html-break', { html: true });
hcgTooltip('.tip-html-color', { html: true });
hcgTooltip('.tip-html-list',  { html: true });

Focus trigger

trigger: 'focus' shows the tooltip on keyboard focus.

Tab to the input
View code 
hcgTooltip('.tip-focus', { trigger: 'focus', gravity: 's' });

Manual trigger

trigger: 'manual' - call show() / hide() yourself.

Programmatic control
Target element
View code 
hcgTooltip('#tip-manual-target', { trigger: 'manual', gravity: 's' });
document.getElementById('tip-manual-show').onclick = () =>
  hcgTooltip('#tip-manual-target', 'show');
document.getElementById('tip-manual-hide').onclick = () =>
  hcgTooltip('#tip-manual-target', 'hide');

Live delegation

live: true works on elements added after init.

Dynamic elements
View code 
hcgTooltip('.tip-live', { live: true, gravity: 'n' });

document.getElementById('live-add').onclick = () => {
  const btn = document.createElement('button');
  btn.className = 'demo-btn tip-live';
  btn.title = 'Added dynamically!';
  btn.textContent = 'New';
  document.getElementById('live-zone').appendChild(btn);
};

Custom title source

Read from another attribute or a callback function.

data-tip attribute
View code 
hcgTooltip('.tip-custom', { title: 'data-tip' });

hcgTooltip('.tip-callback', {
  title: (el) => 'Computed: ' + el.textContent.trim()
});

Data attributes

Declare tooltips in HTML with data-hcg-tooltip - call hcgTooltip.initFromData() once, no per-element JS.

From title
Inline text + gravity south
Delay + themed class
View code 
<button data-hcg-tooltip title="Hello!">Title attr</button>

<button data-hcg-tooltip="Tooltip below" data-hcg-tooltip-gravity="s">
  Inline + gravity
</button>

<button data-hcg-tooltip="Delayed error tip"
        data-hcg-tooltip-gravity="n"
        data-hcg-tooltip-delay-in="400"
        data-hcg-tooltip-class="hcg-tooltip-error">
  Delayed themed
</button>

hcgTooltip.initFromData();

Fallback

When title is empty, fallback text is shown.

No title attribute
View code 
hcgTooltip('.tip-fallback', { fallback: 'Default tooltip text' });
JavaScript Library