Angular Awesome - Tooltip Directive

Overview

The Tooltip directive provides a popup that displays additional information when a user hovers over or focuses on an element. It supports various placement options, customizable styling, and different trigger methods.

Import

Import the tooltip directive from the angular-awesome package:

// Import the tooltip directive
import WaTooltipDirective from 'angular-awesome';

API Reference

WaTooltipDirective

Input	Type	Default	Description
for	string	required	ID of the element the tooltip is for
placement	string	'top'	Placement of the tooltip: 'top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end'
disabled	boolean	false	Whether the tooltip is disabled
distance	number	8	Distance in pixels from the target element
skidding	number	0	Offset in pixels along the target element
open	boolean	false	Whether the tooltip is open
showDelay	number	150	Delay in milliseconds before showing the tooltip
hideDelay	number	0	Delay in milliseconds before hiding the tooltip
trigger	string	'hover focus'	Space-separated list of events that trigger the tooltip: 'hover', 'focus', 'click', 'manual'

Styling Inputs

Input	Type	Description
backgroundColor	string	Background color of the tooltip
borderRadius	string	Border radius of the tooltip
maxWidth	string	Maximum width of the tooltip
padding	string	Padding inside the tooltip
arrowSize	string	Size of the tooltip arrow

Events

Event	Description
waShow	Emitted when the tooltip begins to show
waAfterShow	Emitted after the tooltip has fully shown
waHide	Emitted when the tooltip begins to hide
waAfterHide	Emitted after the tooltip has fully hidden

Examples

Basic Usage

<button id="tooltip-target">Hover Me</button>
<wa-tooltip for="tooltip-target">This is a tooltip</wa-tooltip>

Different Placements

<button id="top-tooltip">Top Tooltip</button>
<wa-tooltip for="top-tooltip" placement="top">Appears on top</wa-tooltip>

<button id="right-tooltip">Right Tooltip</button>
<wa-tooltip for="right-tooltip" placement="right">Appears on the right</wa-tooltip>

<button id="bottom-tooltip">Bottom Tooltip</button>
<wa-tooltip for="bottom-tooltip" placement="bottom">Appears on the bottom</wa-tooltip>

<button id="left-tooltip">Left Tooltip</button>
<wa-tooltip for="left-tooltip" placement="left">Appears on the left</wa-tooltip>

Custom Styling

<button id="custom-tooltip">Custom Styled Tooltip</button>
<wa-tooltip
  for="custom-tooltip"
  backgroundColor="#3f51b5"
  borderRadius="8px"
  maxWidth="300px"
  padding="12px"
  arrowSize="10px"
>
  This tooltip has custom styling
</wa-tooltip>

Different Triggers

<button id="hover-tooltip">Hover Trigger</button>
<wa-tooltip for="hover-tooltip" trigger="hover">Triggered by hover</wa-tooltip>

<button id="focus-tooltip">Focus Trigger</button>
<wa-tooltip for="focus-tooltip" trigger="focus">Triggered by focus</wa-tooltip>

<button id="click-tooltip">Click Trigger</button>
<wa-tooltip for="click-tooltip" trigger="click">Triggered by click</wa-tooltip>

Controlling Delays

<button id="delay-tooltip">Delayed Tooltip</button>
<wa-tooltip
  for="delay-tooltip"
  showDelay="500"
  hideDelay="200"
>
  This tooltip has custom show/hide delays
</wa-tooltip>

Programmatically Controlled

<button id="controlled-tooltip">Controlled Tooltip</button>
<wa-tooltip
  for="controlled-tooltip"
  trigger="manual"
  [open]="isTooltipOpen"
>
  This tooltip is programmatically controlled
</wa-tooltip>

<button (click)="isTooltipOpen = !isTooltipOpen">
  Toggle Tooltip
</button>

With Event Handling

<button id="event-tooltip">Event Tooltip</button>
<wa-tooltip
  for="event-tooltip"
  (waShow)="onShow()"
  (waAfterShow)="onAfterShow()"
  (waHide)="onHide()"
  (waAfterHide)="onAfterHide()"
>
  This tooltip emits events
</wa-tooltip>

Rich Content

<button id="rich-tooltip">Rich Content Tooltip</button>
<wa-tooltip for="rich-tooltip">
  <div>
    <h4>Rich Tooltip Content</h4>
    <p>Tooltips can contain rich HTML content including:</p>
    <ul>
      <li>Formatted text</li>
      <li>Images</li>
      <li>Links</li>
    </ul>
  </div>
</wa-tooltip>