@talenra/components documentation
  1. Directives
  2. TooltipDirective

File

tooltip/src/tooltip/tooltip.directive.ts

Description

Tooltip provides an explanatory text which is displayed when the hosting element is hovered. By default the Tooltip is displayed below the hosting element (south). The preferred position can be changed (s. talenraTooltipPosition). If space is limited, position is adjusted automatically.

Example :
<span talenraTooltip="Tooltip text">Hover me</span>

Import

Example :
import { TooltipDirective } from '@talenra/components/tooltip';

../../../#/tooltip

Implements

OnDestroy

Metadata

Selector [talenraTooltip]

Index

Inputs

Inputs

disabled
Default value : false, { alias: 'talenraTooltipDisabled', transform: booleanAttribute }

Determines whether Tooltip is displayed when the hosting element is hovered. Use this property to conditionally de-/activate a Tooltip (e.g. based on the app's state, user interaction or content).

Example :
<span talenraTooltip="Tooltip text" [talenraTooltipDisabled]="disableTooltip">Hover me</span>
position
Type : TTooltipPosition
Default value : 'south', { alias: 'talenraTooltipPosition' }

The Tooltip's position relative to the hosting element ('north', 'east', …). Defaults to 'south'.

Example :
<span talenraTooltip="Tooltip text" talenraTooltipPosition="north">Hover me</span>

See TooltipPosition
text
Type : string
Default value : '', { alias: 'talenraTooltip' }

Text displayed in Tooltip.

Example :
<span talenraTooltip="Tooltip text">Hover me</span>

results matching ""

    No results matching ""