Component

Tooltip

A directive that floats a label beside any element. Show plain text or keyboard shortcuts, place it on any side and alignment, add an arrow and offset, open on hover, click, or under your own control, tune the open/close delays, and project a rich template with context.

Text & shortcut

Any element works

import { ChangeDetectionStrategy, Component } from '@angular/core';

import { HbButtonComponent, HbTooltipImports } from '@herbst/ui';

@Component({
  selector: 'hb-demo-tooltip-basic',
  imports: [HbTooltipImports, HbButtonComponent],
  template: `
    <div class="flex flex-wrap items-center gap-3">
      <button hb-button hbType="secondary" hbTooltip="Add a new photo">Hover me</button>

      <button hb-button hbType="outline" hbTooltip="Save changes" [hbTooltipShortcut]="['⌘', 'S']">
        With shortcut
      </button>

      <span
        hbTooltip="Oak leaves — Black Forest"
        class="cursor-help text-sm underline decoration-dotted underline-offset-4"
      >
        Any element works
      </span>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoTooltipBasicComponent {}

Side, align, arrow & offset

Trigger, template, delay & controlled

API reference

[hbTooltip] — content

Property	Description	Type	Default
hbTooltip	The tooltip text. The directive attaches to the host element it sits on.	string	''
[hbTooltipShortcut]	One or more keys rendered as kbd chips after the text.	string \| string[]	[]
[hbTooltipContent] / [hbTooltipContentContext]	A TemplateRef for rich content, and the context object passed to it (as $implicit / let-ctx).	TemplateRef \| unknown	null
[hbTooltipClass]	Extra classes merged onto the tooltip panel.	ClassValue	''

[hbTooltip] — placement & behaviour

Property	Description	Type	Default
[hbTooltipPosition]	Preferred side; flips to the opposite side when space is tight.	'top' \| 'right' \| 'bottom' \| 'left'	'top'
[hbTooltipAlign]	Alignment of the panel along the chosen side.	'start' \| 'center' \| 'end'	'center'
[hbTooltipArrow] / [hbTooltipOffset]	Show a pointer arrow, and set the gap in pixels between trigger and panel.	boolean / number	false / 6
[hbTooltipTrigger]	How it opens: on hover/focus, on click (dismiss on outside click), or manual (you drive it).	'hover' \| 'click' \| 'manual'	'hover'
[hbTooltipDelay]	Open/close delay in ms — a single number for both, or { open, close }.	number \| { open?, close? }	300 / 100
[hbTooltipDisabled]	Prevent the tooltip from ever opening.	boolean	false
[hbTooltipOpen] / (hbTooltipOpenChange)	Controlled open state (pair with trigger "manual"), and an event emitted as it opens and closes.	boolean \| undefined / boolean	undefined
provideHbTooltip(config)	App-level defaults: position, align, trigger, openDelay, closeDelay, offset, arrow.	Provider	—