@elemental/ui / Class

LmnTooltipDirective

Decorators:@Directive
Selectors:[lmnTooltip]

No documentation has been provided.

Properties

NameTypeDescription
attrId
r
InputSignal<string | undefined>

Static HTML id attribute assigned to the tooltip element

disabled
r
InputSignalWithTransform<boolean, unknown>

Set the tooltip to disabled state

ellipsisRef
r
InputSignal<HTMLElement | undefined>

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
InputSignal<boolean>

Set the tooltip's schema to negative

position
r
InputSignal<LmnTooltipPosition>

Tooltip position related to the host element

Possible values: 'above' | 'below' | 'before' | 'after'

tooltip
r
InputSignal<string | undefined>

The label to be displayed within the tooltip

touchGestures
r
InputSignal<LmnTooltipTouchGestures>

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:

  • 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.
triggerRef
r
InputSignal<HTMLElement | undefined>

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
InputSignalWithTransform<boolean, unknown>

Set the tooltip's visibility on content truncation

visibleOnHostOnly
r
InputSignal<boolean>

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
disable(): void;
Returns
void

enable()

Enable the tooltip rendering and event listening

Presentation
enable(): void;
Returns
void

hide()

Manually hide the tooltip

Presentation
hide(): void;
Returns
void

show()

Manually show the tooltip

Presentation
show(): void;
Returns
void

updateTooltipPosition()

Update tooltip position

Presentation
updateTooltipPosition(): void;
Returns
void