Tooltip JAVASCRIPT UI Component API

Tooltip Javascript API

Class

Tooltip

Tooltip

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

Selector

smart-tooltip

Properties

AanimationSets or gets the animation mode. Animation is disabled when the property is set to 'none'
AalignDetermines how to align the tooltip.
AarrowGets or sets whether a tooltip's arrow will be shown.
AarrowDirectionSets the position of the arrow.
DdelayGets or sets whether a tooltip's arrow will be shown.
DdisabledEnables or disables the tooltip.
OoffsetSets an offset by X and Y.
LlocaleSets or gets the language. Used in conjunction with the property messages.
LlocalizeFormatFunctionCallback, related to localization module.
MmessagesSets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property language.
OopenModeSets or gets the way of triggering the tooltip.
PpositionGets or sets the position of the tooltip.
SselectorSets the element which triggers the tooltip.
TthemeDetermines the theme. Theme defines the look of the element
TtooltipTemplateSets custom tooltip template.
UunfocusableIf is set to true, the element cannot be focused.
VvalueSets or gets the widget's value.
VvisibleSets or gets the visibility of the tooltip.

Events

OopenThis event is triggered when the tooltip is opened.
OopeningThis event is triggered before the tooltip is opened. The event can be prevented via event.preventDefault().
CcloseThis event is triggered when the tooltip is closed.
CclosingThis event is triggered before the tooltip is closed. The event can be prevented via event.preventDefault().

Methods

CcloseCloses smart-tooltip.
OopenOpens smart-tooltip.
TtoggleToggles smart-tooltip.
CclearClears the content of the Tooltip.

Properties

animation"none" | "simple" | "advanced"

Sets or gets the animation mode. Animation is disabled when the property is set to 'none'

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

Determines how to align the tooltip.

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

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

Default value

false

Example

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"

Sets the position of the arrow.

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

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

Default value

0

Example

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

Enables or disables the tooltip.

Default value

false

Example

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[]

Sets an offset by X and Y.

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;

localestring

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

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, related to localization module.

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

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

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"

Sets or gets the way of triggering the tooltip.

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"

Gets or sets the position of the tooltip.

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

Sets the element which triggers the tooltip.

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

Determines the theme. Theme defines the look of the element

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

Sets custom tooltip template.

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

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

Default value

false

Example

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

Sets or gets the widget's value.

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

Sets or gets the visibility of the tooltip.

Default value

false

Example

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 when the tooltip is opened.

  • 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 triggered before the tooltip is opened. The event can be prevented via event.preventDefault().

  • 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 when the tooltip is closed.

  • 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 triggered before the tooltip is closed. The event can be prevented via event.preventDefault().

  • 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 smart-tooltip.


Invoke the close method.

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

open(): void

Opens smart-tooltip.


Invoke the open method.

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

toggle(): void

Toggles smart-tooltip.


Invoke the toggle method.

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

clear(): void

Clears the content of the Tooltip.


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