Tooltip - Form Widgets Documentation

Usage

HTML (Auto-init)

Add the fw-tooltip class to any element. The title attribute is automatically used as the content.

HTML

<button class="fw-tooltip" title="This is a tooltip">Hover me</button>

<script>
  FormWidgets.autoInit();
</script>

HTML with Data Attributes

HTML

<span class="fw-tooltip"
      data-content="<strong>Bold</strong> content supported"
      data-position="right"
      data-variant="warning">
  Hover for details
</span>

JavaScript Initialization

JavaScript

FormWidgets.init('#myElement', 'Tooltip', {
    position: 'bottom',
    content: 'Saved successfully!',
    variant: 'success',
    delay: 200
});

Options

Option	Type	Default	Description
content	string	null	The text or HTML to display. If null, the element's `title` or `data-content` attribute is used.
position	string	'top'	Preferred position relative to the element. Options: `'top'`, `'bottom'`, `'left'`, `'right'`.
variant	string	'default'	Visual style variant. Options: `'default'` (dark), `'warning'` (orange), `'error'` (red).
delay	number	0	Delay in milliseconds before showing the tooltip.
trigger	string	'hover focus'	Events that trigger the tooltip. Space-separated list.

Data Attributes

Data Attribute	Equivalent Option	Example
data-content	`content`	`data-content="<b>Info</b>"`
data-position	`position`	`data-position="right"`
data-variant	`variant`	`data-variant="error"`
data-delay	`delay`	`data-delay="500"`

Methods

widget.show()

Manually displays the tooltip.

widget.hide()

Manually hides the tooltip.

widget.setContent(html)

Updates the tooltip content dynamically. Useful for AJAX loading.

Parameter: html â€” The new content string.

JavaScript

const widget = FormWidgets.instances.get(document.getElementById('myBtn'));

// Show programmatically
widget.show();

// Update content later
widget.setContent('New content loaded!');

Keyboard Navigation

TabFocusing the element automatically shows the tooltip

EscCloses the tooltip while keeping focus on the element

Features

Auto Positioning

Supports top, bottom, left, and right placement.

HTML Content

Render bold text, italics, or icons inside the tooltip.

Accessible

Automatically manages aria-describedby and role="tooltip".

Themable

Includes built-in variants for warnings and errors.

Notes

Title Attribute

When initialized, the widget removes the native title attribute from the element to prevent the browser's default tooltip from appearing double.

Container

Tooltips are appended to the <body> to ensure they appear above all other content and are not clipped by `overflow: hidden` on parent containers.