HexagonJS
Edit Page
Tooltip
A component for showing a small panel on hover, with supporting information elaborating content on screen.
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

HTML

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

JavaScript

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

HTML

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

JavaScript

hx.select('#tooltip-icon')
  .set(hx.tooltip({
    icon: 'fas fa-info-circle',
    text: 'A little bit more information',
  }));
Api
Functions
hx.tooltipoptionsObjectadded
Creates a small panel on hover, with supporting information elaborating content on screen.
Arguments
options
Properties
iconString
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.
labelString
The text for the user to hover over to display the tooltip.
You can only use a label or an icon, not both.
textString
The text to display inside the tooltip