Tooltip
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
import { Component } from '@angular/core';
import { lucidePlus } from '@ng-icons/lucide';
import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
import { BrnTooltipContentDirective } from '@spartan-ng/brain/tooltip';
import { HlmTooltipComponent, HlmTooltipTriggerDirective } from '@spartan-ng/ui-tooltip-helm';
@Component({
selector: 'spartan-tooltip-preview',
standalone: true,
imports: [
HlmTooltipComponent,
HlmTooltipTriggerDirective,
BrnTooltipContentDirective,
HlmButtonDirective,
HlmIconComponent,
],
providers: [provideIcons({ lucidePlus })],
template: `
<hlm-tooltip>
<button hlmTooltipTrigger aria-describedby="Hello world" hlmBtn variant="outline">Default</button>
<span *brnTooltipContent class="flex items-center">
Add to library
<hlm-icon class="ml-2" size="sm" name="lucidePlus" />
</span>
</hlm-tooltip>
`,
})
export class TooltipPreviewComponent {}Installation
npx nx g @spartan-ng/cli:ui tooltip
ng g @spartan-ng/cli:ui tooltip
Usage
import { BrnTooltipContentDirective } from '@spartan-ng/brain/tooltip';
import { HlmTooltipComponent, HlmTooltipTriggerDirective } from '@spartan-ng/ui-tooltip-helm';<hlm-tooltip>
<button hlmTooltipTrigger aria-describedby="Hello world">Default</button>
<span *brnTooltipContent>Add to library</span>
</hlm-tooltip>Examples
Default
import { Component } from '@angular/core';
import { lucidePlus } from '@ng-icons/lucide';
import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
import { BrnTooltipContentDirective } from '@spartan-ng/brain/tooltip';
import { HlmTooltipComponent, HlmTooltipTriggerDirective } from '@spartan-ng/ui-tooltip-helm';
@Component({
selector: 'spartan-tooltip-preview',
standalone: true,
imports: [
HlmTooltipComponent,
HlmTooltipTriggerDirective,
BrnTooltipContentDirective,
HlmButtonDirective,
HlmIconComponent,
],
providers: [provideIcons({ lucidePlus })],
template: `
<hlm-tooltip>
<button hlmTooltipTrigger aria-describedby="Hello world" hlmBtn variant="outline">Default</button>
<span *brnTooltipContent class="flex items-center">
Add to library
<hlm-icon class="ml-2" size="sm" name="lucidePlus" />
</span>
</hlm-tooltip>
`,
})
export class TooltipPreviewComponent {}Simple
import { Component } from '@angular/core';
import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
import { HlmTooltipComponent, HlmTooltipTriggerDirective } from '@spartan-ng/ui-tooltip-helm';
@Component({
selector: 'spartan-tooltip-simple',
standalone: true,
imports: [
HlmTooltipComponent,
HlmTooltipTriggerDirective,
HlmButtonDirective,
],
template: `
<button [hlmTooltipTrigger]="'Simple tooltip'" aria-describedby="Simple tooltip" hlmBtn variant="outline">
Simple
</button>
`,
})
export class TooltipSimpleComponent {}