Tooltip

Tooltip Alignment

The alignment will be updated in a later release to be centred above the label/icon (or below if there is not enough space).

The current alignment is MVP and slightly off for icons.

Examples

<div id="tooltip"></div>

hx.select('#tooltip')
  .set(hx.tooltip({
    text: 'A little bit more information',
    label: 'Text tooltip label'
  }));

<div id="tooltip-icon"></div>

hx.select('#tooltip-icon')
  .set(hx.tooltip({
    icon: 'fas fa-info-circle',
    text: 'A little bit more information',
  }));

Api

Functions

hx.tooltipoptionsObjectbugfix

Bug Fix

Resolved an issue with the tooltip styles that was causing the tooltip to flicker when hovering.

Creates a small panel on hover, with supporting information elaborating content on screen.

Arguments

options

Properties

Option Requirements

This option requires the "Font Awesome 5 Free" font to be available on the page

The npm package used for a given release can be found in package.json under optionalDependencies

The icon for the user to hover over to display the tooltip.

It should be a fontawesome icon.

You can only use a label or an icon, not both.

The text for the user to hover over to display the tooltip.

You can only use a label or an icon, not both.

The text to display inside the tooltip