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 { BrnTooltipContentTemplate } from '@spartan-ng/brain/tooltip';
import { HlmButton } from '@spartan-ng/helm/button';
import { HlmTooltip, HlmTooltipTrigger } from '@spartan-ng/helm/tooltip';
@Component({
selector: 'spartan-tooltip-preview',
imports: [HlmTooltip, HlmTooltipTrigger, BrnTooltipContentTemplate, HlmButton],
template: `
<div>
<hlm-tooltip>
<button hlmTooltipTrigger aria-describedby="Hello world" hlmBtn variant="outline">Default</button>
<span *brnTooltipContent class="flex items-center">
Add to library
<span class="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-full">
<svg
class="bg-primary fill-primary z-50 block size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]"
width="10"
height="5"
viewBox="0 0 30 10"
preserveAspectRatio="none"
>
<polygon points="0,0 30,0 15,10"></polygon>
</svg>
</span>
</span>
</hlm-tooltip>
</div>
`,
})
export class TooltipPreview {}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/helm/tooltip';<hlm-tooltip>
<button hlmTooltipTrigger aria-describedby="Hello world">Default</button>
<span *brnTooltipContent>Add to library</span>
</hlm-tooltip>Brain API
BrnTooltipContentTemplate
Selector: [brnTooltipContent]
BrnTooltipContent
Selector: brn-tooltip-content
BrnTooltipTrigger
Selector: [brnTooltipTrigger]
ExportAs: brnTooltipTrigger
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| position | TooltipPosition | this._defaultOptions?.position ?? above | Allows the user to define the position of the tooltip relative to the parent element |
| positionAtOrigin | unknown | this._defaultOptions?.positionAtOrigin ?? false | Whether tooltip should be relative to the click or touch origin instead of outside the element bounding box. |
| brnTooltipDisabled | unknown | false | Disables the display of the tooltip. |
| showDelay | unknown | this._defaultOptions?.showDelay ?? 0 | The default delay in ms before showing the tooltip after show is called |
| hideDelay | unknown | this._defaultOptions?.hideDelay ?? 0 | The default delay in ms before hiding the tooltip after hide is called |
| exitAnimationDuration | unknown | this._defaultOptions?.exitAnimationDuration ?? 0 | The default duration in ms that exit animation takes before hiding |
| tooltipContentClasses | string | this._defaultOptions?.tooltipContentClasses ?? | The default delay in ms before hiding the tooltip after hide is called |
| touchGestures | TooltipTouchGestures | this._defaultOptions?.touchGestures ?? auto | How touch gestures should be handled by the tooltip. On touch devices the tooltip directive uses a long press gesture to show and hide, however it can conflict with the native browser gestures. To work around the conflict, Angular Material disables native gestures on the trigger, but that might not be desirable on particular elements (e.g. inputs and draggable elements). The different values for this option configure the touch event handling as follows: - `auto` - Enables touch gestures for all elements, but tries to avoid conflicts with native browser gestures on particular elements. In particular, it allows text selection on inputs and textareas, and preserves the native browser dragging on elements marked as `draggable`. - `on` - Enables touch gestures for all elements and disables native browser gestures with no exceptions. - `off` - Disables touch gestures. Note that this will prevent the tooltip from showing on touch devices. |
| aria-describedby | unknown | - | The message to be used to describe the aria in the tooltip |
| brnTooltipTrigger | string | TemplateRef<unknown> | null | null | The content to be displayed in the tooltip |
BrnTooltip
Selector: [brnTooltip]
Helm API
HlmTooltipTrigger
Selector: [hlmTooltipTrigger]
HlmTooltip
Selector: hlm-tooltip
Examples
Simple
import { Component } from '@angular/core';
import { HlmButton } from '@spartan-ng/helm/button';
import { HlmTooltipTrigger } from '@spartan-ng/helm/tooltip';
@Component({
selector: 'spartan-tooltip-simple',
imports: [HlmTooltipTrigger, HlmButton],
template: `
<button [hlmTooltipTrigger]="'Simple tooltip'" aria-describedby="Simple tooltip" hlmBtn variant="outline">
Simple
</button>
`,
})
export class TooltipSimple {}