Tooltip
Tooltip is an alternate for the html title. It displays a popup with details on hover.
Selector
smart-tooltip
Properties
Events
Methods
Properties
animation"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"Example
Set the animation property.
<smart-tooltip animation='none'></smart-tooltip>
Set the animation property by using the HTML Element's instance.
const tooltip = document.querySelector('smart-tooltip');
tooltip.animation = 'simple';
Get the animation property.
const tooltip = document.querySelector('smart-tooltip');
let animation = tooltip.animation;
alignstring
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"Example
Set the align property.
<smart-tooltip align='left'></smart-tooltip>
Set the align property by using the HTML Element's instance.
const tooltip = document.querySelector('smart-tooltip');
tooltip.align = 'right';
Get the align property.
const tooltip = document.querySelector('smart-tooltip');
let align = tooltip.align;
arrowboolean
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
falseExample
Set the arrow property.
<smart-tooltip arrow></smart-tooltip>
Set the arrow property by using the HTML Element's instance.
const tooltip = document.querySelector('smart-tooltip');
tooltip.arrow = false;
Get the arrow property.
const tooltip = document.querySelector('smart-tooltip');
let arrow = tooltip.arrow;
arrowDirection"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"Example
Set the arrowDirection property.
<smart-tooltip arrow-direction='left'></smart-tooltip>
Set the arrowDirection property by using the HTML Element's instance.
const tooltip = document.querySelector('smart-tooltip');
tooltip.arrowDirection = 'right';
Get the arrowDirection property.
const tooltip = document.querySelector('smart-tooltip');
let arrowDirection = tooltip.arrowDirection;
delaynumber
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
0Example
Set the delay property.
<smart-tooltip delay='true'></smart-tooltip>
Set the delay property by using the HTML Element's instance.
const tooltip = document.querySelector('smart-tooltip');
tooltip.delay = false;
Get the delay property.
const tooltip = document.querySelector('smart-tooltip');
let delay = tooltip.delay;
disabledboolean
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
falseExample
Set the disabled property.
<smart-tooltip disabled></smart-tooltip>
Set the disabled property by using the HTML Element's instance.
const tooltip = document.querySelector('smart-tooltip');
tooltip.disabled = false;
Get the disabled property.
const tooltip = document.querySelector('smart-tooltip');
let disabled = tooltip.disabled;
offsetnumber[]
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.
Example
Set the offset property.
<smart-tooltip offset='10,20'></smart-tooltip>
Set the offset property by using the HTML Element's instance.
const tooltip = document.querySelector('smart-tooltip');
tooltip.offset = 30,50;
Get the offset property.
const tooltip = document.querySelector('smart-tooltip');
let offset = tooltip.offset;
unlockKeystring
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
""Example
Set the unlockKey property.
<smart-tooltip unlock-key=''></smart-tooltip>
Set the unlockKey property by using the HTML Element's instance.
const tooltip = document.querySelector('smart-tooltip');
tooltip.unlockKey = '1111-2222-3333-4444-5555';
Get the unlockKey property.
const tooltip = document.querySelector('smart-tooltip');
let unlockKey = tooltip.unlockKey;
localestring
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"Example
Set the locale property.
<smart-tooltip locale='de'></smart-tooltip>
Set the locale property by using the HTML Element's instance.
const tooltip = document.querySelector('smart-tooltip');
tooltip.locale = 'fr';
Get the locale property.
const tooltip = document.querySelector('smart-tooltip');
let locale = tooltip.locale;
localizeFormatFunctionfunction | 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.
Example
Set the localizeFormatFunction property.
<smart-tooltip localize-format-function='function(){return '...'}'></smart-tooltip>
Set the localizeFormatFunction property by using the HTML Element's instance.
const tooltip = document.querySelector('smart-tooltip');
tooltip.localizeFormatFunction = function(){return '...'};
Get the localizeFormatFunction property.
const tooltip = document.querySelector('smart-tooltip');
let localizeFormatFunction = tooltip.localizeFormatFunction;
messagesobject
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}}."
}
Example
Set the messages property.
<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>
Set the messages property by using the HTML Element's instance.
const tooltip = document.querySelector('smart-tooltip');
tooltip.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}}."}};
Get the messages property.
const tooltip = document.querySelector('smart-tooltip');
let messages = tooltip.messages;
openMode"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"Example
Set the openMode property.
<smart-tooltip open-mode='click'></smart-tooltip>
Set the openMode property by using the HTML Element's instance.
const tooltip = document.querySelector('smart-tooltip');
tooltip.openMode = 'focus';
Get the openMode property.
const tooltip = document.querySelector('smart-tooltip');
let openMode = tooltip.openMode;
position"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"Example
Set the position property.
<smart-tooltip position='left'></smart-tooltip>
Set the position property by using the HTML Element's instance.
const tooltip = document.querySelector('smart-tooltip');
tooltip.position = 'right';
Get the position property.
const tooltip = document.querySelector('smart-tooltip');
let position = tooltip.position;
selectorstring | 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.
Example
Set the selector property.
<smart-tooltip selector='selectorId1'></smart-tooltip>
Set the selector property by using the HTML Element's instance.
const tooltip = document.querySelector('smart-tooltip');
tooltip.selector = selectorId2;
Get the selector property.
const tooltip = document.querySelector('smart-tooltip');
let selector = tooltip.selector;
themestring
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
""Example
Set the theme property.
<smart-tooltip theme='blue'></smart-tooltip>
Set the theme property by using the HTML Element's instance.
const tooltip = document.querySelector('smart-tooltip');
tooltip.theme = 'red';
Get the theme property.
const tooltip = document.querySelector('smart-tooltip');
let theme = tooltip.theme;
tooltipTemplateany
Specifies a custom template for rendering the tooltip content, allowing you to define the layout, styling, and dynamic data displayed within the tooltip.
Example
Set the tooltipTemplate property.
<smart-tooltip tooltip-template='templateId1'></smart-tooltip>
Set the tooltipTemplate property by using the HTML Element's instance.
const tooltip = document.querySelector('smart-tooltip');
tooltip.tooltipTemplate = templateId2;
Get the tooltipTemplate property.
const tooltip = document.querySelector('smart-tooltip');
let tooltipTemplate = tooltip.tooltipTemplate;
unfocusableboolean
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
falseExample
Set the unfocusable property.
<smart-tooltip unfocusable></smart-tooltip>
Set the unfocusable property by using the HTML Element's instance.
const tooltip = document.querySelector('smart-tooltip');
tooltip.unfocusable = false;
Get the unfocusable property.
const tooltip = document.querySelector('smart-tooltip');
let unfocusable = tooltip.unfocusable;
valuestring
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
""""Example
Set the value property.
<smart-tooltip value='Value'></smart-tooltip>
Set the value property by using the HTML Element's instance.
const tooltip = document.querySelector('smart-tooltip');
tooltip.value = 'New Value';
Get the value property.
const tooltip = document.querySelector('smart-tooltip');
let value = tooltip.value;
visibleboolean
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
falseExample
Set the visible property.
<smart-tooltip visible></smart-tooltip>
Set the visible property by using the HTML Element's instance.
const tooltip = document.querySelector('smart-tooltip');
tooltip.visible = false;
Get the visible property.
const tooltip = document.querySelector('smart-tooltip');
let visible = tooltip.visible;
Events
openCustomEvent
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.
Example
Set up the event handler of open event.
const tooltip = document.querySelector('smart-tooltip'); tooltip.addEventListener('open', function (event) { // event handling code goes here. })
openingCustomEvent
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.
Example
Set up the event handler of opening event.
const tooltip = document.querySelector('smart-tooltip'); tooltip.addEventListener('opening', function (event) { // event handling code goes here. })
closeCustomEvent
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.
Example
Set up the event handler of close event.
const tooltip = document.querySelector('smart-tooltip'); tooltip.addEventListener('close', function (event) { // event handling code goes here. })
closingCustomEvent
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.
Example
Set up the event handler of closing event.
const tooltip = document.querySelector('smart-tooltip'); tooltip.addEventListener('closing', function (event) { // event handling code goes here. })
Methods
close(): void
Closes the smart-tooltip component, removing the tooltip from view and disabling any tooltip functionality associated with the target element.
Invoke the close method.
const tooltip = document.querySelector('smart-tooltip'); tooltip.close();
open(): void
Displays the smart-tooltip component, providing contextual information or guidance to the user when triggered.
Invoke the open method.
const tooltip = document.querySelector('smart-tooltip'); tooltip.open();
toggle(): void
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.
Invoke the toggle method.
const tooltip = document.querySelector('smart-tooltip'); tooltip.toggle();
clear(): void
Removes all content currently displayed within the Tooltip, restoring it to an empty state and ensuring no text, HTML, or interactive elements remain visible.
Invoke the clear method.
const tooltip = document.querySelector('smart-tooltip'); tooltip.clear();
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