Tooltip Component

Accessible tooltips with smart positioning and keyboard support

Quick Start

Add helpful hints to any element with the tooltip component. Tooltips automatically appear on hover and focus, with full keyboard and screen reader support.

Basic Tooltip • HTML
<button data-tooltip="This is a helpful hint">
    Hover or focus me
</button>
Required Files • HTML
<!-- In <head> -->
<link rel="stylesheet" href="styles/tooltip.css" />

<!-- Before </body> -->
<script src="javascript/tooltip.js"></script>

CSS Classes

Base Class

Class Description
.rsl-tooltip Base tooltip container (automatically added by JavaScript)

Variant Classes

Class Description
.rsl-tooltip-light Light background variant
.rsl-tooltip-primary Primary brand color variant
.rsl-tooltip-success Success/green variant
.rsl-tooltip-warning Warning/yellow variant
.rsl-tooltip-danger Danger/red variant

Size Classes

Class Max Width Font Size
.rsl-tooltip-sm 180px 0.75rem
.rsl-tooltip (default) 250px 0.875rem
.rsl-tooltip-lg 350px 0.9375rem

Data Attributes

Attribute Values Default Description
data-tooltip string - Required. The tooltip text content
data-tooltip-position top, bottom, left, right top Tooltip position relative to trigger element
data-tooltip-variant default, light, primary, success, warning, danger default Tooltip color variant
data-tooltip-size sm, md, lg md Tooltip size
Example with All Attributes • HTML
<button
    data-tooltip="Click to submit your form"
    data-tooltip-position="right"
    data-tooltip-variant="success"
    data-tooltip-size="lg">
    Submit
</button>

JavaScript API

Automatic Initialization

Tooltips are automatically initialized on page load for all elements with data-tooltip attribute.

Manual Control

Method Parameters Description
RSL.Tooltip.init() - Initialize all tooltips on the page
RSL.Tooltip.attach(element, options) element (HTMLElement|string)
options (Object, optional)		 Attach tooltip to a specific element
RSL.Tooltip.show(element) element (HTMLElement) Show tooltip for an element
RSL.Tooltip.hide(element) element (HTMLElement) Hide tooltip for an element
RSL.Tooltip.toggle(element) element (HTMLElement) Toggle tooltip visibility
RSL.Tooltip.destroy(element) element (HTMLElement) Remove tooltip functionality from element

Configuration Options

Option Type Default Description
position string 'top' Tooltip position: 'top', 'bottom', 'left', 'right'
variant string 'default' Color variant
size string 'md' Size: 'sm', 'md', 'lg'
showDelay number 300 Delay in ms before showing tooltip
hideDelay number 200 Delay in ms before hiding tooltip
offset number 8 Distance in px from trigger element
autoPosition boolean true Auto-flip position if near viewport edge
JavaScript Example • JavaScript
// Attach tooltip with custom options
RSL.Tooltip.attach('#myButton', {
    position: 'right',
    variant: 'primary',
    showDelay: 500,
    hideDelay: 100
});

// Programmatically show/hide
var button = document.querySelector('#myButton');
RSL.Tooltip.show(button);

setTimeout(function() {
    RSL.Tooltip.hide(button);
}, 2000);

Accessibility

Built-in Accessibility Features

  • ARIA Attributes: Tooltips use role="tooltip" and aria-describedby to create proper relationships
  • Keyboard Support: Tooltips appear on focus and can be dismissed with Escape key
  • Focus Management: Automatically adds tabindex="0" to non-focusable elements
  • Screen Readers: Content is announced when tooltip appears
  • Touch Support: Tap to toggle on mobile devices
  • Reduced Motion: Respects prefers-reduced-motion preference
  • High Contrast: Supports prefers-contrast: high mode

Keyboard Interactions

Key Action
Tab Focus trigger element and show tooltip
Escape Hide tooltip and return focus to trigger
Shift + Tab Move focus away and hide tooltip

Best Practices

Browser Support

Tooltip component works in all modern browsers: