Tooltip

Overview

Import the directive and put it on the trigger.

import { GogTooltipDirective } from '@guildofgleks/ui';

@Component({
  // ...
  imports: [GogTooltipDirective],
})

Basic usage — hover or tab onto either of these:

<button gogTooltip="Save changes">Save</button>

<!-- Or on a gog-* component’s own host tag — it needs to know nothing about it. -->
<gog-chip [gogTooltip]="hint">Draft</gog-chip>

Examples

<gog-button gogTooltip="Above" gogTooltipPosition="top">top</gog-button>
<gog-button gogTooltip="Below" gogTooltipPosition="bottom">bottom</gog-button>
<gog-button gogTooltip="To the left" gogTooltipPosition="left">left</gog-button>
<gog-button gogTooltip="To the right" gogTooltipPosition="right">right</gog-button>

<ng-template #richHint>
  <strong>Deployment blocked</strong>
  <p>Two checks are still running. <gog-tag variant="warning">CI</gog-tag></p>
</ng-template>

<gog-button [gogTooltip]="richHint">Deploy</gog-button>

<gog-button gogTooltip="Appears at once" [gogTooltipShowDelay]="0">No delay</gog-button>
<gog-button gogTooltip="Takes a second" [gogTooltipShowDelay]="1000">Slow</gog-button>
<gog-button gogTooltip="Never shown" [gogTooltipDisabled]="true">Disabled</gog-button>

App-wide defaults

Position and both delays read GOG_CONFIG.tooltip, so a house style is set once. An instance's own input always wins.

import { provideGogConfig } from '@guildofgleks/ui';

bootstrapApplication(App, {
  providers: [
    provideGogConfig({
      tooltip: {
        position: 'top',
        showDelay: 150,
        hideDelay: 100,
      },
    }),
  ],
});

Restyling one bubble

The bubble is appended to document.body, so it is never clipped by an ancestor's overflow: hidden — and so it sits outside any scoped component stylesheet. That is the same limitation gog-select's [appendToBody] panel has: gogTooltipClass applies a class to the bubble, but the rules for that class have to come from an unscoped (global) stylesheet.

Visually the bubble is the same floating-panel recipe as a dialog panel or a dropdown — surface background, plain border, panel shadow — rather than a bespoke inverted bubble, so it reads as part of a themed app instead of something dropped on top of it.

Accessibility

Shown on both mouse hover and keyboard focus, dismissible with Escape, and hoverable so a long bubble can actually be read. Focus is tracked with focusin / focusout rather than focus / blur, which keeps it replay-safe under SSR event replay.

A tooltip triggered inside a dialog stacks above it — the dialog panel raises --gog-tooltip-z the same way it raises the dropdown's.

API Reference

Inputs

Styling Tokens

Every CSS custom property the tooltip paints with. Override any of them — on a subtree or a theme — to restyle it. See the Theming guide for the full token-layering model, or the Theme Generator to tweak these live.