Tooltip

Component wrapper for Oat CSS tooltips. Supports plain text via text and rich content via [template].

InputTypeDefaultDescription
textstring''Plain text tooltip (CSS-only)
templateTemplateRef—Rich template content (programmatic)
position'top' | 'bottom' | 'left' | 'right''top'Tooltip placement
delaynumber700Show delay in ms (template mode)
disabledbooleanfalseDisable tooltip

Import & Usage

typescript
import { Component } from '@angular/core';
import { NgOatTooltipComponent } from '@letsprogram/ng-oat';

@Component({
  selector: 'app-example',
  imports: [NgOatTooltipComponent],
  template: `
    <ng-oat-tooltip text="Helpful info" position="top">
      <button>Hover me</button>
    </ng-oat-tooltip>

    <ng-oat-tooltip [template]="richTip" position="bottom">
      <button>Rich tooltip</button>
    </ng-oat-tooltip>
    <ng-template #richTip>
      <div><strong>Title</strong><p>Rich content here</p></div>
    </ng-template>
  `,
})
export class ExampleComponent {}

Text Tooltips

html
<ng-oat-tooltip text="Top tooltip">
  <button>Top</button>
</ng-oat-tooltip>

<ng-oat-tooltip text="Bottom tooltip" position="bottom">
  <button class="outline">Bottom</button>
</ng-oat-tooltip>

Disabled State

html
<ng-oat-tooltip text="You won't see this" [disabled]="true">
  <button class="outline">Disabled tooltip</button>
</ng-oat-tooltip>