Tooltip

Package: @synapse-ui/tooltip Selector: synapse-tooltip Status: Stable

A lightweight tooltip that wraps any content and displays a text hint on hover, with four placement options and a configurable delay.

Overview

Tooltip uses a wrapper-element approach: place your trigger content inside the component using <ng-content>, and the tooltip text floats above/below/beside it on hover. Visibility is managed with Angular signals and a configurable delay.

Installation

npm install @synapse-ui/tooltip @synapse-ui/theme

Basic Example

import { Component } from '@angular/core';
import { Tooltip } from '@synapse-ui/tooltip';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [Tooltip],
  template: `
    <synapse-tooltip text="Copy to clipboard" position="top">
      <button>Copy</button>
    </synapse-tooltip>

    <synapse-tooltip text="Opens in a new tab" position="right" [delay]="300">
      <a href="#">External link</a>
    </synapse-tooltip>
  `,
})
export class DemoComponent {}

API Reference

Inputs

Input	Type	Default	Description
text	string	''	Tooltip label to display
position	TooltipPosition	'top'	Where the tooltip appears relative to the trigger
delay	number	0	Milliseconds to wait before showing the tooltip

Types

type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';

Placement

<synapse-tooltip text="Above" position="top">
  <button>Top</button>
</synapse-tooltip>

<synapse-tooltip text="Below" position="bottom">
  <button>Bottom</button>
</synapse-tooltip>

<synapse-tooltip text="Left side" position="left">
  <button>Left</button>
</synapse-tooltip>

<synapse-tooltip text="Right side" position="right">
  <button>Right</button>
</synapse-tooltip>

Show Delay

A delay is useful to avoid flicker when the cursor moves quickly across the page:

<!-- Tooltip appears 500 ms after hover -->
<synapse-tooltip text="Delayed hint" [delay]="500">
  <synapse-button>Hover me</synapse-button>
</synapse-tooltip>

Icon Button Example

<synapse-tooltip text="Delete item" position="top">
  <synapse-button variant="danger" ariaLabel="Delete"> 🗑 </synapse-button>
</synapse-tooltip>