Possible values: 'none', 'simple', 'advanced'.
Sets or gets the animation mode. Animation is disabled when the property is set to 'none'

Code examples

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;

Gets or sets whether a tooltip's arrow will be shown.

Code examples

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;

Possible values: 'bottom', 'top', 'left', 'right'.
Sets the position of the arrow.

Code examples

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;

Gets or sets whether a tooltip's arrow will be shown.

Code examples

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;

Enables or disables the tooltip.

Code examples

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;

Sets an offset by X and Y.

Code examples

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;

Sets or gets the language. Used in conjunction with the property messages.

Code examples

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;

Callback, related to localization module.

Code examples

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;

Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property language.

Code examples

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;

Possible values: 'click', 'focus', 'hover', 'manual'.
Sets or gets the way of triggering the tooltip.

Code examples

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;

Possible values: 'bottom', 'top', 'left', 'right', 'absolute'.
Gets or sets the position of the tooltip.

Code examples

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;

Sets the element which triggers the tooltip.

Code examples

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;

Determines the theme. Theme defines the look of the element

Code examples

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;

Sets custom tooltip template.

Code examples

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;

If is set to true, the element cannot eb focused.

Code examples

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;

Sets or gets the widget's value.

Code examples

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;

Sets or gets the visibility of the tooltip.

Code examples

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;

This event is triggered when the tooltip is opened.

Code examples

Bind to the open event by type: smartTooltip

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

 tooltip.addEventListener('open', function (event) {
     // event handling code goes here.
 }
 

This event is triggered when the tooltip is closed.

Code examples

Bind to the close event by type: smartTooltip

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

 tooltip.addEventListener('close', function (event) {
     // event handling code goes here.
 }
 

Closes smart-tooltip.

Code examples

Invoke the close method.

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

 tooltip.close(); 

Opens smart-tooltip.

Code examples

Invoke the open method.

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

 tooltip.open(); 

Toggles smart-tooltip.

Code examples

Invoke the toggle method.

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

 tooltip.toggle();