@anguless/angulux/tooltip
tooltip
1 declarations3 demos
import
import { TooltipModule } from '@anguless/angulux/tooltip';Basic
aglTooltip attaches a tooltip to any element, with the text as its value.
<input aglInputText aglTooltip="Enter your username" placeholder="Hover me" />Position
tooltipPosition places the tooltip on any of the four sides.
<agl-button label="Right" aglTooltip="Add" tooltipPosition="right" /><agl-button label="Top" aglTooltip="Add" tooltipPosition="top" /><agl-button label="Bottom" aglTooltip="Add" tooltipPosition="bottom" /><agl-button label="Left" aglTooltip="Add" tooltipPosition="left" />Delay
showDelay and hideDelay keep a tooltip from flickering on a passing cursor.
<agl-button label="Delayed" aglTooltip="Shown after a second" [showDelay]="1000" [hideDelay]="300" />API
Generated from the committed corpus, which check:corpus holds to the built library.
Tooltip
directive[aglTooltip]Tooltip directive provides advisory information for a component.
| Input | Type | Default | Description |
|---|---|---|---|
| tooltipPosition | 'right' | 'left' | 'top' | 'bottom' | string | undefined | not documented | Position of the tooltip. |
| tooltipEvent | 'hover' | 'focus' | 'both' | not documented | Event to show the tooltip. |
| positionStyle | string | undefined | not documented | Type of CSS position. |
| tooltipStyleClass | string | undefined | not documented | Style class of the tooltip. |
| tooltipZIndex | string | undefined | not documented | Whether the z-index should be managed automatically to always go on top or have a fixed value. |
| escape | boolean | not documented | By default the tooltip contents are rendered as text. Set to false to support html tags in the content. |
| showDelay | number | undefined | not documented | Delay to show the tooltip in milliseconds. |
| hideDelay | number | undefined | not documented | Delay to hide the tooltip in milliseconds. |
| life | number | undefined | not documented | Time to wait in milliseconds to hide the tooltip even it is active. |
| positionTop | number | undefined | not documented | Specifies the additional vertical offset of the tooltip from its default position. |
| positionLeft | number | undefined | not documented | Specifies the additional horizontal offset of the tooltip from its default position. |
| autoHide | boolean | not documented | Whether to hide tooltip when hovering over tooltip content. |
| fitContent | boolean | not documented | Automatically adjusts the element position when there is not enough space on the selected position. |
| hideOnEscape | boolean | not documented | Whether to hide tooltip on escape key press. |
| showOnEllipsis | boolean | not documented | Whether to show the tooltip only when the target text overflows (e.g., ellipsis is active). |
| aglTooltip property content | string | TemplateRef<HTMLElement> | undefined | not documented | Content of the tooltip. |
| tooltipDisabled property disabled | boolean | false | When present, it specifies that the component should be disabled. |
| tooltipOptions | TooltipOptions | undefined | not documented | Specifies the tooltip configuration options for the component. |
| appendTo | HTMLElement | ElementRef | TemplateRef<any> | 'self' | 'body' | null | undefined | any | 'self' | Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name). |
| ptTooltip deprecated — use pTooltipPT instead. | TooltipPassThrough | undefined | undefined | Used to pass attributes to DOM elements inside the Tooltip component. |
| pTooltipPT | TooltipPassThrough | undefined | undefined | Used to pass attributes to DOM elements inside the Tooltip component. |
| pTooltipUnstyled | boolean | undefined | undefined | Indicates whether the component should be rendered without styles. |
Inherited from BaseComponent
inherited| Input | Type | Default | Description |
|---|---|---|---|
| dt | Object | undefined | undefined | Defines scoped design tokens of the component. |
| unstyled | boolean | undefined | undefined | Indicates whether the component should be rendered without styles. |
| pt | PT | undefined | undefined | Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received. |
| ptOptions | PassThroughOptions | undefined | undefined | Used to configure passthrough(pt) options of the component. |