Tooltip — Smart UI JavaScript API

Tooltip — Smart UI JavaScript API

On this page + Quick start

Quick start · JavaScript

Complete starter source per framework. Run the scaffold/install command first, then replace the listed files with the full code below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Tooltip - JavaScript Quick Start</title>
  <link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
  <smart-tooltip id="demo-tooltip"></smart-tooltip>

  <script type="module">
    import './node_modules/smart-webcomponents/source/modules/smart.tooltip.js';

    const el = document.getElementById('demo-tooltip');
    if (el) {

      el.selector = 'button';
      el.arrow = true;
      el.value = 'This is a tooltip for smartButton';

      el.addEventListener('change', (event) => console.log('change:', event.detail || event));
    }
  </script>
</body>
</html>
For AI tooling

Developer Quick Reference

Component: Tooltip   Framework: JavaScript   Selector: smart-tooltip

API counts: 19 properties, 4 methods, 4 events

Common properties: 0, 1, 2, 3, 4, 5

Common methods: close(), open(), toggle(), clear()

Common events: open, opening, close, closing

Module hint: smart-webcomponents/source/modules/smart.tooltip.js

Tooltip is an alternate for the html title. It displays a popup with details on hover.

Class

Tooltip

Tooltip

Tooltip is an alternate for the html title. It displays a popup with details on hover.

Selector

smart-tooltip

Quick picks

closedisabledopenvalue

Properties

AalignSpecifies the alignment of the tooltip relative to its target element, such as positioning it above, below, to the left, or to the right of the target. This setting controls where the tooltip appears in relation to the element it is associated with.
AanimationAllows you to specify or retrieve the current animation mode. Set this property to 'none' to disable all animations. When assigned other valid values, it enables the corresponding animation effects for the element or component.
AarrowDetermines whether the tooltip's arrow is displayed. Setting this property to true will show the arrow pointing to the anchor element, while setting it to false will hide the arrow. This enhances tooltip visibility and contextual association with the target element.
AarrowDirectionSpecifies the location or alignment of the arrow relative to its parent element, determining where the arrow will appear (such as top, bottom, left, right, or center) within the component or tooltip.
DdelayDetermines whether the tooltip's arrow is displayed. When set to true, an arrow will appear pointing from the tooltip to its target element; when set to false, the tooltip will be shown without an arrow. This property can be used to customize the visual connection between the tooltip and its anchor element.
DdisabledControls whether the tooltip is displayed. When enabled, the tooltip appears when users hover over or interact with the associated element. When disabled, the tooltip is hidden and does not appear under any circumstances.
LlocaleSpecifies or retrieves the current language setting. This property determines which set of localized messages from the messages property will be used. Changing this value updates the displayed content to match the selected language.
LlocalizeFormatFunctionCallback function associated with the localization module, typically invoked to handle language changes, region-specific formatting, or to update interface text based on the selected locale.
MmessagesDefines or retrieves an object containing the localized text strings used within the widget interface. This property allows you to customize the displayed text for different languages or regions, and works together with the language property to support localization and internationalization of the widget's UI elements.
OoffsetSpecifies the horizontal (X) and vertical (Y) offset values, allowing you to adjust the position of an element relative to its original location. The X value shifts the element left or right, while the Y value moves it up or down.
OopenModeSpecifies or retrieves the method by which the tooltip is activated, such as on hover, focus, or click events.
PpositionSpecifies or retrieves the placement of the tooltip relative to its associated element. This determines where the tooltip appears, such as above, below, to the left, or to the right of the target element.
SselectorSpecifies the HTML element that will act as the trigger for displaying the tooltip. When the user interacts with this element (such as by hovering, focusing, or clicking—depending on configuration), the tooltip will appear.
TthemeSpecifies the theme applied to the element. The theme controls the element’s overall appearance, including colors, fonts, and stylistic details, ensuring a consistent visual presentation throughout the interface.
TtooltipTemplateSpecifies a custom template for rendering the tooltip content, allowing you to define the layout, styling, and dynamic data displayed within the tooltip.
UunfocusableWhen set to true, this property prevents the element from receiving keyboard focus, making it inaccessible through keyboard navigation such as the Tab key.
UunlockKeySets or retrieves the unlockKey used to grant access to the product. The unlockKey acts as an authorization token or code required to unlock and enable the product’s features.
VvalueGets the current value of the widget or sets a new value for the widget. This property allows you to retrieve the widget's existing value or update it programmatically.
VvisibleControls whether the tooltip is visible or hidden. When set, this property determines if the tooltip is displayed to the user; when accessed, it returns the current visibility status of the tooltip.

Events

CcloseThis event is triggered immediately after the tooltip has been closed, either by user interaction or programmatically. It signals that the tooltip is no longer visible in the user interface and can be used to perform cleanup operations or update other components in response to the tooltip's dismissal.
CclosingThis event is fired immediately before the tooltip is about to close. It provides an opportunity to perform actions or validations before the tooltip is hidden. By calling event.preventDefault(), you can cancel the closing of the tooltip, keeping it visible until the action is allowed to proceed.
OopenThis event is triggered immediately when the tooltip becomes visible to the user, indicating that the tooltip has been successfully opened and is now displayed on the screen. This can be used to perform additional actions, such as loading content or tracking analytics, when a tooltip appears.
OopeningThis event is dispatched immediately before the tooltip becomes visible to the user. By calling event.preventDefault() within the event handler, you can cancel the tooltip from opening, allowing you to implement custom logic or conditions before the tooltip is displayed.

Methods

CclearRemoves all content currently displayed within the Tooltip, restoring it to an empty state and ensuring no text, HTML, or interactive elements remain visible.
CcloseCloses the smart-tooltip component, removing the tooltip from view and disabling any tooltip functionality associated with the target element.
OopenDisplays the smart-tooltip component, providing contextual information or guidance to the user when triggered.
TtoggleEnables or disables the smart-tooltip component, controlling whether tooltips are displayed or hidden for the specified elements. This toggle function allows developers to dynamically show or hide helpful tooltip information in the user interface based on user interaction or application state.

Properties

alignSpecifies the alignment of the tooltip relative to its target element, such as positioning it above, below, to the left, or to the right of the target. This setting controls where the tooltip appears in relation to the element it is associated with.string

Specifies the alignment of the tooltip relative to its target element, such as positioning it above, below, to the left, or to the right of the target. This setting controls where the tooltip appears in relation to the element it is associated with.

Default value

"center"

Examples

Markup and runtime examples for align:

HTML:

<smart-tooltip align="left"></smart-tooltip>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-tooltip');
el.align = "right";

Read the current value:

const el = document.querySelector('smart-tooltip');
const align = el.align;

animationAllows you to specify or retrieve the current animation mode. Set this property to 'none' to disable all animations. When assigned other valid values, it enables the corresponding animation effects for the element or component."none" | "simple" | "advanced"

Allows you to specify or retrieve the current animation mode. Set this property to 'none' to disable all animations. When assigned other valid values, it enables the corresponding animation effects for the element or component.

Allowed Values

  • "none" - animation is disabled
  • "simple" - ripple animation is disabled
  • "advanced" - all animations are enabled

Default value

"advanced"

Examples

Markup and runtime examples for animation:

HTML:

<smart-tooltip animation="none"></smart-tooltip>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-tooltip');
el.animation = "simple";

Read the current value:

const el = document.querySelector('smart-tooltip');
const animation = el.animation;

arrowDetermines whether the tooltip's arrow is displayed. Setting this property to true will show the arrow pointing to the anchor element, while setting it to false will hide the arrow. This enhances tooltip visibility and contextual association with the target element.boolean

Determines whether the tooltip's arrow is displayed. Setting this property to true will show the arrow pointing to the anchor element, while setting it to false will hide the arrow. This enhances tooltip visibility and contextual association with the target element.

Default value

false
Try a demo showcasing the arrow property.

Examples

Markup and runtime examples for arrow:

HTML attribute:

<smart-tooltip arrow></smart-tooltip>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-tooltip');
el.arrow = false;

Read the current value:

const el = document.querySelector('smart-tooltip');
const arrow = el.arrow;

arrowDirectionSpecifies the location or alignment of the arrow relative to its parent element, determining where the arrow will appear (such as top, bottom, left, right, or center) within the component or tooltip."bottom" | "top" | "left" | "right"

Specifies the location or alignment of the arrow relative to its parent element, determining where the arrow will appear (such as top, bottom, left, right, or center) within the component or tooltip.

Default value

"bottom"
Try a demo showcasing the arrowDirection property.

Examples

Markup and runtime examples for arrowDirection:

HTML:

<smart-tooltip arrow-direction="left"></smart-tooltip>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-tooltip');
el.arrowDirection = "right";

Read the current value:

const el = document.querySelector('smart-tooltip');
const arrowDirection = el.arrowDirection;

delayDetermines whether the tooltip's arrow is displayed. When set to true, an arrow will appear pointing from the tooltip to its target element; when set to false, the tooltip will be shown without an arrow. This property can be used to customize the visual connection between the tooltip and its anchor element.number

Determines whether the tooltip's arrow is displayed. When set to true, an arrow will appear pointing from the tooltip to its target element; when set to false, the tooltip will be shown without an arrow. This property can be used to customize the visual connection between the tooltip and its anchor element.

Default value

0
Try a demo showcasing the delay property.

Examples

Markup and runtime examples for delay:

HTML:

<smart-tooltip delay="true"></smart-tooltip>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-tooltip');
el.delay = false;

Read the current value:

const el = document.querySelector('smart-tooltip');
const delay = el.delay;

disabledControls whether the tooltip is displayed. When enabled, the tooltip appears when users hover over or interact with the associated element. When disabled, the tooltip is hidden and does not appear under any circumstances.boolean

Controls whether the tooltip is displayed. When enabled, the tooltip appears when users hover over or interact with the associated element. When disabled, the tooltip is hidden and does not appear under any circumstances.

Default value

false

Examples

Markup and runtime examples for disabled:

HTML attribute:

<smart-tooltip disabled></smart-tooltip>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-tooltip');
el.disabled = false;

Read the current value:

const el = document.querySelector('smart-tooltip');
const disabled = el.disabled;

localeSpecifies or retrieves the current language setting. This property determines which set of localized messages from the messages property will be used. Changing this value updates the displayed content to match the selected language.string

Specifies or retrieves the current language setting. This property determines which set of localized messages from the messages property will be used. Changing this value updates the displayed content to match the selected language.

Default value

"en"

Examples

Markup and runtime examples for locale:

HTML:

<smart-tooltip locale="de"></smart-tooltip>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-tooltip');
el.locale = "fr";

Read the current value:

const el = document.querySelector('smart-tooltip');
const locale = el.locale;

localizeFormatFunctionCallback function associated with the localization module, typically invoked to handle language changes, region-specific formatting, or to update interface text based on the selected locale.function | null

Callback function associated with the localization module, typically invoked to handle language changes, region-specific formatting, or to update interface text based on the selected locale.

Examples

Markup and runtime examples for localizeFormatFunction:

HTML:

<smart-tooltip localize-format-function="function(){return '...'}"></smart-tooltip>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-tooltip');
el.localizeFormatFunction = "function(){return '...'}";

Read the current value:

const el = document.querySelector('smart-tooltip');
const localizeFormatFunction = el.localizeFormatFunction;

messagesDefines or retrieves an object containing the localized text strings used within the widget interface. This property allows you to customize the displayed text for different languages or regions, and works together with the language property to support localization and internationalization of the widget's UI elements.object

Defines or retrieves an object containing the localized text strings used within the widget interface. This property allows you to customize the displayed text for different languages or regions, and works together with the language property to support localization and internationalization of the widget's UI elements.

Default value




"en": {

"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",

"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",

"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",

"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",

"moduleUndefined": "Module is undefined.",

"missingReference": "{{elementType}}: Missing reference to {{files}}.",

"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",

"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",

"invalidSelector": "{{elementType}}: '{{property}}' must be a string, an HTMLElement or null.",

"invalidNode": "{{elementType}}: Invalid parameter '{{node}}' when calling {{method}}."

}

Examples

Markup and runtime examples for messages:

HTML:

<smart-tooltip messages="{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss.","invalidSelector":"{{elementType}}: '{{property}}' muss ein string, ein HTMLElement oder null sein.","invalidNode":"{{elementType}}: Ungultiger Parameter '{{node}}' beim Aufruf von {{method}}."}}"></smart-tooltip>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-tooltip');
el.messages = {"en":{"propertyUnknownType":"'{{name}}' property is with undefined 'type' member!","propertyInvalidValue":"Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!","propertyInvalidValueType":"Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!","elementNotInDOM":"Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.","moduleUndefined":"Module is undefined.","missingReference":"{{elementType}}: Missing reference to {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser doesn't support HTMLTemplate elements.","invalidTemplate":"{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.","invalidSelector":"{{elementType}}: '{{property}}' must be a string, an HTMLElement or null.","invalidNode":"{{elementType}}: Invalid parameter '{{node}}' when calling {{method}}."}};

Read the current value:

const el = document.querySelector('smart-tooltip');
const messages = el.messages;

offsetSpecifies the horizontal (X) and vertical (Y) offset values, allowing you to adjust the position of an element relative to its original location. The X value shifts the element left or right, while the Y value moves it up or down. number[]

Specifies the horizontal (X) and vertical (Y) offset values, allowing you to adjust the position of an element relative to its original location. The X value shifts the element left or right, while the Y value moves it up or down.

Try a demo showcasing the offset property.

Examples

Markup and runtime examples for offset:

HTML:

<smart-tooltip offset="10,20"></smart-tooltip>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-tooltip');
el.offset = "30,50";

Read the current value:

const el = document.querySelector('smart-tooltip');
const offset = el.offset;

openModeSpecifies or retrieves the method by which the tooltip is activated, such as on hover, focus, or click events."click" | "focus" | "hover" | "manual"

Specifies or retrieves the method by which the tooltip is activated, such as on hover, focus, or click events.

Default value

"hover"

Examples

Markup and runtime examples for openMode:

HTML:

<smart-tooltip open-mode="click"></smart-tooltip>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-tooltip');
el.openMode = "focus";

Read the current value:

const el = document.querySelector('smart-tooltip');
const openMode = el.openMode;

positionSpecifies or retrieves the placement of the tooltip relative to its associated element. This determines where the tooltip appears, such as above, below, to the left, or to the right of the target element."bottom" | "top" | "left" | "right" | "absolute"

Specifies or retrieves the placement of the tooltip relative to its associated element. This determines where the tooltip appears, such as above, below, to the left, or to the right of the target element.

Default value

"top"
Try a demo showcasing the position property.

Examples

Markup and runtime examples for position:

HTML:

<smart-tooltip position="left"></smart-tooltip>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-tooltip');
el.position = "right";

Read the current value:

const el = document.querySelector('smart-tooltip');
const position = el.position;

selectorSpecifies the HTML element that will act as the trigger for displaying the tooltip. When the user interacts with this element (such as by hovering, focusing, or clicking—depending on configuration), the tooltip will appear.string | HTMLElement

Specifies the HTML element that will act as the trigger for displaying the tooltip. When the user interacts with this element (such as by hovering, focusing, or clicking—depending on configuration), the tooltip will appear.

Try a demo showcasing the selector property.

Examples

Markup and runtime examples for selector:

HTML:

<smart-tooltip selector="selectorId1"></smart-tooltip>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-tooltip');
el.selector = "selectorId2";

Read the current value:

const el = document.querySelector('smart-tooltip');
const selector = el.selector;

themeSpecifies the theme applied to the element. The theme controls the element’s overall appearance, including colors, fonts, and stylistic details, ensuring a consistent visual presentation throughout the interface.string

Specifies the theme applied to the element. The theme controls the element’s overall appearance, including colors, fonts, and stylistic details, ensuring a consistent visual presentation throughout the interface.

Default value

""

Examples

Markup and runtime examples for theme:

HTML:

<smart-tooltip theme="blue"></smart-tooltip>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-tooltip');
el.theme = "red";

Read the current value:

const el = document.querySelector('smart-tooltip');
const theme = el.theme;

tooltipTemplateSpecifies a custom template for rendering the tooltip content, allowing you to define the layout, styling, and dynamic data displayed within the tooltip.any

Specifies a custom template for rendering the tooltip content, allowing you to define the layout, styling, and dynamic data displayed within the tooltip.

Examples

Markup and runtime examples for tooltipTemplate:

HTML:

<smart-tooltip tooltip-template="templateId1"></smart-tooltip>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-tooltip');
el.tooltipTemplate = "templateId2";

Read the current value:

const el = document.querySelector('smart-tooltip');
const tooltipTemplate = el.tooltipTemplate;

unfocusableWhen set to true, this property prevents the element from receiving keyboard focus, making it inaccessible through keyboard navigation such as the Tab key.boolean

When set to true, this property prevents the element from receiving keyboard focus, making it inaccessible through keyboard navigation such as the Tab key.

Default value

false

Examples

Markup and runtime examples for unfocusable:

HTML attribute:

<smart-tooltip unfocusable></smart-tooltip>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-tooltip');
el.unfocusable = false;

Read the current value:

const el = document.querySelector('smart-tooltip');
const unfocusable = el.unfocusable;

unlockKeySets or retrieves the unlockKey used to grant access to the product. The unlockKey acts as an authorization token or code required to unlock and enable the product’s features.string

Sets or retrieves the unlockKey used to grant access to the product. The unlockKey acts as an authorization token or code required to unlock and enable the product’s features.

Default value

""

Examples

Markup and runtime examples for unlockKey:

HTML:

<smart-tooltip unlock-key=""></smart-tooltip>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-tooltip');
el.unlockKey = "1111-2222-3333-4444-5555";

Read the current value:

const el = document.querySelector('smart-tooltip');
const unlockKey = el.unlockKey;

valueGets the current value of the widget or sets a new value for the widget. This property allows you to retrieve the widget's existing value or update it programmatically.string

Gets the current value of the widget or sets a new value for the widget. This property allows you to retrieve the widget's existing value or update it programmatically.

Default value

""""
Try a demo showcasing the value property.

Examples

Markup and runtime examples for value:

HTML:

<smart-tooltip value="Value"></smart-tooltip>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-tooltip');
el.value = "New Value";

Read the current value:

const el = document.querySelector('smart-tooltip');
const value = el.value;

visibleControls whether the tooltip is visible or hidden. When set, this property determines if the tooltip is displayed to the user; when accessed, it returns the current visibility status of the tooltip.boolean

Controls whether the tooltip is visible or hidden. When set, this property determines if the tooltip is displayed to the user; when accessed, it returns the current visibility status of the tooltip.

Default value

false

Examples

Markup and runtime examples for visible:

HTML attribute:

<smart-tooltip visible></smart-tooltip>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-tooltip');
el.visible = false;

Read the current value:

const el = document.querySelector('smart-tooltip');
const visible = el.visible;

Events

closeThis event is triggered immediately after the tooltip has been closed, either by user interaction or programmatically. It signals that the tooltip is no longer visible in the user interface and can be used to perform cleanup operations or update other components in response to the tooltip's dismissal.CustomEvent

This event is triggered immediately after the tooltip has been closed, either by user interaction or programmatically. It signals that the tooltip is no longer visible in the user interface and can be used to perform cleanup operations or update other components in response to the tooltip's dismissal.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onClose

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the close event.

Examples

Listen for close using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-tooltip')?.addEventListener('close', (event) => {
	// event handling code goes here.
})

closingThis event is fired immediately before the tooltip is about to close. It provides an opportunity to perform actions or validations before the tooltip is hidden. By calling event.preventDefault(), you can cancel the closing of the tooltip, keeping it visible until the action is allowed to proceed.CustomEvent

This event is fired immediately before the tooltip is about to close. It provides an opportunity to perform actions or validations before the tooltip is hidden. By calling event.preventDefault(), you can cancel the closing of the tooltip, keeping it visible until the action is allowed to proceed.

  • Bubbles Yes
  • Cancelable Yes
  • Interface CustomEvent
  • Event handler property onClosing

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Examples

Listen for closing using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-tooltip')?.addEventListener('closing', (event) => {
	// event handling code goes here.
})

openThis event is triggered immediately when the tooltip becomes visible to the user, indicating that the tooltip has been successfully opened and is now displayed on the screen. This can be used to perform additional actions, such as loading content or tracking analytics, when a tooltip appears.CustomEvent

This event is triggered immediately when the tooltip becomes visible to the user, indicating that the tooltip has been successfully opened and is now displayed on the screen. This can be used to perform additional actions, such as loading content or tracking analytics, when a tooltip appears.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onOpen

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the open event.

Examples

Listen for open using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-tooltip')?.addEventListener('open', (event) => {
	// event handling code goes here.
})

openingThis event is dispatched immediately before the tooltip becomes visible to the user. By calling event.preventDefault() within the event handler, you can cancel the tooltip from opening, allowing you to implement custom logic or conditions before the tooltip is displayed.CustomEvent

This event is dispatched immediately before the tooltip becomes visible to the user. By calling event.preventDefault() within the event handler, you can cancel the tooltip from opening, allowing you to implement custom logic or conditions before the tooltip is displayed.

  • Bubbles Yes
  • Cancelable Yes
  • Interface CustomEvent
  • Event handler property onOpening

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Examples

Listen for opening using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-tooltip')?.addEventListener('opening', (event) => {
	// event handling code goes here.
})

Methods

clear(): voidRemoves all content currently displayed within the Tooltip, restoring it to an empty state and ensuring no text, HTML, or interactive elements remain visible.

Removes all content currently displayed within the Tooltip, restoring it to an empty state and ensuring no text, HTML, or interactive elements remain visible.

On the custom element in the DOM (narrow the selector, e.g. to #my-tooltip, if you host multiple widgets):

document.querySelector('smart-tooltip')?.clear();

close(): voidCloses the smart-tooltip component, removing the tooltip from view and disabling any tooltip functionality associated with the target element.

Closes the smart-tooltip component, removing the tooltip from view and disabling any tooltip functionality associated with the target element.

On the custom element in the DOM (narrow the selector, e.g. to #my-tooltip, if you host multiple widgets):

document.querySelector('smart-tooltip')?.close();

open(): voidDisplays the smart-tooltip component, providing contextual information or guidance to the user when triggered.

Displays the smart-tooltip component, providing contextual information or guidance to the user when triggered.

On the custom element in the DOM (narrow the selector, e.g. to #my-tooltip, if you host multiple widgets):

document.querySelector('smart-tooltip')?.open();

Try a demo showcasing the open method.

toggle(): voidEnables or disables the smart-tooltip component, controlling whether tooltips are displayed or hidden for the specified elements. This toggle function allows developers to dynamically show or hide helpful tooltip information in the user interface based on user interaction or application state.

Enables or disables the smart-tooltip component, controlling whether tooltips are displayed or hidden for the specified elements. This toggle function allows developers to dynamically show or hide helpful tooltip information in the user interface based on user interaction or application state.

On the custom element in the DOM (narrow the selector, e.g. to #my-tooltip, if you host multiple widgets):

document.querySelector('smart-tooltip')?.toggle();

CSS Variables

--smart-tooltip-arrow-widthvar()

Default value

"6px"

Default smartTooltip arrow width

--smart-tooltip-arrow-colorvar()

Default value

"var(--smart-secondary)"

smartTooltip arrow color

--smart-tooltip-arrow-translatevar()

Default value

"0"

smartTooltip arrow translation (transformation)

--smart-tooltip-paddingvar()

Default value

"4px 8px"

smartTooltip padding