Tooltip
LmnTooltipDirective
import { LmnTooltipDirective } from '@elemental/ui';
Decorators: |
|
Selectors: | [ |
Properties
Name | Type | Description |
---|---|---|
attrId r |
| Static HTML id attribute assigned to the tooltip element |
disabled r |
| Set the tooltip to disabled state |
ellipsisRef r |
| Element used to detect if we need to activate the tooltip when the ref has ellipsis If the ref is the same of the tooltip's trigger, you can omit this input |
negative r |
| Set the tooltip's schema to negative |
position r |
| Tooltip position related to the host element Possible values: 'above' | 'below' | 'before' | 'after' |
tooltip r |
| The label to be displayed within the tooltip |
touchGestures r |
| 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, disable 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:
|
triggerRef r |
| Tooltip's trigger element, is used also with visibleOnContentTruncation = true to determine if the tooltip should be displayed when the ref has ellipsis If the ellipsis check has to be done on a different element, use the input 'lmnTooltipEllipsisRef' |
visibleOnContentTruncation r |
| Set the tooltip's visibility on content truncation |
visibleOnHostOnly r |
| Whether to apply the tooltip only when focusing or hovering the host only, and not other nested focusable elements |
Methods
disable() |
---|
Disable the tooltip rendering and event listening |
Presentation
|
Returnsvoid |
enable() |
---|
Enable the tooltip rendering and event listening |
Presentation
|
Returnsvoid |
hide() |
---|
Manually hide the tooltip |
Presentation
|
Returnsvoid |
show() |
---|
Manually show the tooltip |
Presentation
|
Returnsvoid |
updateTooltipPosition() |
---|
Update tooltip position |
Presentation
|
Returnsvoid |
LmnTooltipRootDirective
import { LmnTooltipRootDirective } from '@elemental/ui';
Decorators: |
|
Selectors: | [ |