ISA-Frontend/libs/ui/tooltip

UI Tooltip Library

A flexible tooltip library for Angular applications, built with Angular CDK overlays.

Features

• Tooltips position themselves automatically (right, left, bottom, top)
• Support for basic text and template content
• Customizable trigger events (click, hover, focus)
• Optional title support
• Customizable appearance

Installation

The tooltip library is part of the UI components library. No additional installation is required beyond the standard project setup.

Basic Usage

import { Component } from '@angular/core';
import { TooltipDirective } from '@isa/ui/tooltip';

@Component({
  selector: 'app-my-component',
  standalone: true,
  imports: [TooltipDirective],
  template: `
    <button 
      uiTooltip 
      [content]="'This is a simple tooltip'">
      Hover me
    </button>
  `
})
export class MyComponent {}

Options

The tooltip directive supports the following inputs:

Input	Type	Default	Description
content	string ⎮ TemplateRef	(required)	The content to display in the tooltip. Can be a string or a template reference.
title	string	undefined	Optional title to display at the top of the tooltip
triggerOn	TooltipTrigger[]	['click', 'hover', 'focus']	Events that trigger the tooltip to appear

Examples

Simple Text Tooltip

<button 
  uiTooltip 
  [content]="'Simple text tooltip'">
  Hover me
</button>

Tooltip with Title

<button 
  uiTooltip 
  [title]="'Tooltip Title'"
  [content]="'This tooltip has a title'">
  Hover me
</button>

Template Content

<button 
  uiTooltip 
  [content]="templateRef">
  Hover for complex content
</button>

<ng-template #templateRef>
  <div>
    <strong>Rich content</strong>
    <p>With multiple elements</p>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </div>
</ng-template>

Custom Triggers

<!-- Click-only tooltip -->
<button 
  uiTooltip 
  [content]="'Click to see this tooltip'"
  [triggerOn]="['click']">
  Click me
</button>

<!-- Hover and focus tooltip -->
<button 
  uiTooltip 
  [content]="'Hover or focus to see this tooltip'"
  [triggerOn]="['hover', 'focus']">
  Hover or focus me
</button>

Positioning

The tooltip will automatically position itself in the following order of preference, based on available space:

1. Right (default/preferred)
2. Left
3. Bottom
4. Top

The tooltip maintains a distance of 1.5rem (24px) from the triggering element.

Styling

The tooltip uses default styling that can be customized by overriding CSS variables or targeting the tooltip classes directly in your global stylesheet.

/* Example of customizing tooltip appearance */
.ui-tooltip {
  background-color: #333;
  color: white;
  border-radius: 4px;
}

.ui-tooltip-title {
  color: #ffcc00;
}

Running unit tests

Run nx test ui-tooltip to execute the unit tests.