Skip to main content

​
Overview

The Tooltip component displays helpful information when users hover over or focus on an element. It’s implemented as a directive that can be applied to any element.

​
Import

import { MagaryTooltip } from 'ng-magary';

​
Basic Usage

<button [magaryTooltip]="'Click to submit'">Submit</button>

​
Positioning

<button 
  [magaryTooltip]="'Tooltip on top'"
  [tooltipPosition]="'top'">
  Hover me
</button>

​
Disabled State

<button 
  [magaryTooltip]="'This won\'t show'"
  [tooltipDisabled]="true">
  No tooltip
</button>

​
Input Properties

​
magaryTooltip
string
The text content to display in the tooltip
​
tooltipPosition
'top' | 'bottom' | 'left' | 'right'
default:"'top'"
Position of the tooltip relative to the target element
​
tooltipDisabled
boolean
default:"false"
Whether the tooltip is disabled

​
Features

  • Auto-positioning: Automatically adjusts position to stay within viewport
  • Keyboard accessible: Shows on focus, hides on blur or Escape key
  • ARIA support: Proper aria-describedby relationship
  • Smart alignment: Prevents overflow with fallback positioning
  • Event listeners: Auto-cleanup on scroll, resize, and escape

​
Accessibility

  • Uses role="tooltip" for screen readers
  • Connects to host element via aria-describedby
  • Responds to keyboard focus events
  • Dismissible with Escape key

​
Browser Support

Supports all modern browsers with proper positioning and viewport detection.

Build docs developers (and LLMs) love

Get started for freeTalk to us