Overview
Framework and Utilities
Angular
React
Vue
Blazor
Integrations
Roadmap
Release Notes
Accessibility
Theme Builder
Grid
Gantt Chart
Scheduler
CardView
Chart
Editor
DockingLayout
Kanban
PivotTable
Table
Accordion
Badge
Barcode
Button
Breadcrumb
Card
Carousel
Calendar
CheckBox
ComboBox
ColorPicker
DateTimePicker
DropDownList
DropDownButton
FileUpload
Form
Gauge
Input
ListBox
ListMenu
Layout
MaskedTextBox
Menu
MultilineTextBox
MultiSplitButton
NumericTextBox
Pager
PasswordTextBox
PowerButton
ProgressBar
QueryBuilder
RadioButton
Rating
RepeatButton
Ribbon Bar
Qrcode
ScrollBar
Slider
Splitter
SwitchButton
Sortable
Tabs
Tank
TextBox
TimePicker
Toast
ToggleButton
Tooltip
Tree
Window
Create a Custom Element
View Model Binding
Data Adapter
Data Exporter
Conditional Formatter
Shadow Dom
Router
Validator
Date API
Numeric API
Drawing API
Localization
Comparison with Others
Overview
WAI-ARIA Support
Section 508 Support
WCAG Compliance
Keyboard Shortcuts
Right-to-left Languages
Overview
Using with Angular
Component NPM packages
Template-driven Forms
Forms Custom Validation
Reactive Forms
Angular Signals
Angular Universal - Server side Rendering
Angular Grid
Angular Grid Data Service
NGX Translate Grid
Angular Grid Refresh Data Source
ngFor Directive
Angular HTTP and Grid CRUD
Dynamic Forms
Form Numeric Validation
Notification Angular Service
Angular routing with Tabs
Angular routing with Splitter
Angular routing with Accordion
Angular Component in Grid column
Refresh Grid data source
Dynamic Components in Tabs
Dynamic Table with ng-for
Angular Debug with VS Code
Angular RxJS
Angular RxJS Server Paging
Angular Azure Face API
Angular Azure Cosmos DB
Angular Electron with Grid
Angular Grid Editing with Form
Angular Grid as Standalone
Angular Gantt as Standalone
Angular Scheduler as Standalone
Using with React
React with Typescript
Using the state Hook
React Grid
NextJS & Grid
Next JS with SSR
Vite
React Kanban Remote data
React Scheduler & MySQL
React Scheduler & MongoDB
React Grid Remote Data
React Grid Edit with Form
React Grid Styling
React Grid CRUD
React Hooks in Grid
React Components in Grid cells
React Components in Table cells
React Grid CRUD with Express JS and MySQL
React Grid and GraphQL
Using with Vue 3
Using with Vue 3 & Typescript
Using with Vue 3 Composition API
Using with Vue 2
Using ListBox with Vue 2
Vue Routing
Vue Grid Data Bind
Using with Blazor & .NET 8, 9
Using with Blazor & .NET 5, 6, 7
Using Blazor with JS Components
Two-way Binding
Localization
Adding to Toolbox
Web Assembly CRUD Application
PWA Application
Desktop Application
.NET MAUI & Blazor
Full-stack app with GraphQL
Full-stack app with GraphQL(2)
Blazor CardView
Setup CardView
Cardview Editing
Cardview Scroll
Blazor Chart
Setup Chart
Chart Axes
Chart Formatting
Chart Polar/Spider
Chart Types
Blazor Editor
Setup Editor
Editor Find & Replace
Editor Inline toolbar
Editor markdown
Editor methods
Editor Paste format
Editor toolbar
Editor toolbar items
Custom toolbar items(JSInterop)
Editor Image Upload
Blazor Docking Layout
Blazor Gantt
Setup Gantt
Gantt Data Bind
Gantt Data Bind to JSON
Gantt events
Gantt export
Gantt header
Gantt nonworking-time
Gantt resources
Gantt Customization
Gantt Timeline
Gantt Custom Header(JSInterop)
Blazor Grid
Setup Grid
Grid Column Menu
Grid Columns Bind
Grid Columns Command Menu
Grid Columns Format
Grid Columns Freeze
Grid Columns Group
Grid Columns Reorder
Grid Columns Resize
Grid Data Bind to CSV
Grid Data Bind to Enumerable
Grid Data Bind to JSON
Grid Data Bind to SQL
Grid Data Bind to Web API
Grid Events
Grid Export
Grid Editing
Grid Filter
Grid Grouping
Grid Paging
Grid Refresh Data
Grid Selection
Grid Server side Crud
Localization
OData binding
Dynamic Template(JSInterop)
Custom Editor
Custom Tooltips
Blazor Inputs
Button
Switch Button
Radio Button
Repeat Button
Dropdown Button
Toggle Button
Progress Bar
Checkbox
Card
Check Input
Multicombo Input
Multi Input
Number Input
Numeric Textbox
Date/Time Picker
Date Range Input
Date Input
Calendar
Slider
Masked TextBox
Password TextBox
File Upload
File Upload handle Files
Dropdownlist
Dropdownlist with Label & Value
Combobox
Combobox with Label & Value
Color Picker
Time Picker
Tank
Blazor Kanban
Setup Kanban
Kanban Nested columns
Kanban SQL bind
Kanban Server Side CRUD
Blazor Pivot
Setup Pivot Table
Pivot Table Columns
Pivot Table Designer
Pivot Table Export
Pivot Table Toolbar
Pivot Table Totals
Blazor Scheduler
Setup Scheduler
Scheduler Agenda view
Scheduler Data Bind to JSON
Scheduler Day View
Scheduler Edit Events
Scheduler Month View
Scheduler Timeline Day View
Scheduler Timeline Month View
Scheduler Timeline Week View
Scheduler Views
Scheduler Week View
Scheduler Custom Footer(JSInterop)
Scheduler SQL bind
Scheduler Server Side CRUD
Blazor Table
Setup Table
Table Change Columns
Table Column Hierarchy
Table Header and Footer
Table Selection
Blazor Accordion
Blazor Tabs
Blazor Tree
Blazor Form
Blazor Form Value Handling
Blazor Query Builder
Blazor ListMenu
Blazor Toast
Blazor Pager
Blazor Menu
Blazor Gauge
Blazor Sortable
Blazor Carousel
Blazor Window
Misc
Tabs Selection
Hide Calendar Weekends
API
Accordion API
Accordion Item API
Button API
Button group API
Breadcrumb API
Card API
Cardview API
Carousel API
Color input API
Country input API
Color picker API
Combobox API
Calendar API
Dropdown list API
Date/time picker API
Date range input API
Date input API
Docking layout API
Dropdown button API
Editor API
File upload API
Form API
Form control API
Form group API
Gantt API
Gauge API
Grid API
Input API
Kanban API
Layout API
Layout group API
Layout item API
List box API
List item API
Masked textbox API
Menu API
Menu item API
Menu items group API
Multi combo input API
Multi input API
Numeric input API
Numeric textbox API
Pager API
Password input API
Password textbox API
Pivot Table API
Phoneinput API
Progressbar API
Query Builder API
Radio Button API
Rating API
Scheduler API
Scrollbar API
Slider API
Splitter API
Tank API
Textbox API
Textarea API
Tabs API
Toast API
TimeInput API
TimePicker API
Tree API
TreeItem API
Window API
Using with Typescript
Using with Lit Element
Using with Sharepoint
Using with PHP & MYSQL
Using with Meteor
Using with Ionic
Using with Stencil
Using Smart.Window with Stencil
Using with Svelte
Using with Electron
Using with Azure Cosmos DB
Using Firebase & OAuth2
Using with AWS DynamoDB
Using with NX(Angular & React)
Using with Webpack
Build ES6 modules with Webpack
Overview
Accessibility
CSS Styling
API
Overview
CSS Styling
Overview
Chart Styling
Chart Formatting
Chart Axes
Chart Types
API
3D Chart Axes
3D Chart Formatting
3D Chart Controls
3D Chart Styling
3D Chart Types
3D Chart API
Overview
Accessibility
CSS Styling
API
Overview
Accessibility
CSS Styling
API
Overview
Editor Toolbar
Context Menu
Auto Save
Iframe mode
Find & Replace
Editor Methods
Markdown
Dialogs
Video
CSS Styling
API
Overview
Accessibility
CSS Styling
API
Overview
Accessibility
CSS Styling
API
Overview
Data bind
Column definitions
Column headers
Column reorder
Context menu
Row Filtering
Row Freeze
Row IDs
Row Reorder
Row Resize
Row Sort
Row Span
Header & Footer
Editing
Cell Editing
Cell Templates
Filtering & Sorting
Grouping
Grouping: Expanding Groups
Paging
Nested Grids
Tree Grid
Rows & Columns
Get Row or Cell
Cascading Cell Editors
Conditional Row Select
Export
Export: Selected Records
Firebase & OAuth2
Using with AWS DynamoDB
Using with NodeJS and MySQL
Scrolling
Selection
Accessibility
Localization
Multi users support
Smart.Grid vs Smart.Table
CSS Styling
Appearance
Formulas
Styling Cells
Styling Rows
API
Overview
Gantt Editing
Gantt Sorting
Gantt Filtering
Gantt Tasks Tree
Gantt Timeline
Gantt Backend Storage
Gantt Resource Management
Gantt Accessibility
CSS Styling
API
Overview
Accessibility
CSS Styling
MultiInput API
CheckInput API
MultiComboInput API
NumberInput API
DateInput API
DateRangeInput API
TimeInput API
ColorInput API
TextArea API
API
Overview
Accessibility
Kanban Complex layouts
Kanban Editing Customization
Kanban User comments
CSS Styling
API
Overview
Accessibility
CSS Styling
API
Overview
Accessibility
CSS Styling
API
Overview
Accessibility
CSS Styling
API
Overview
Accessibility
CSS Styling
API
Overview
Accessibility
CSS Styling
API
Overview
CSS Styling
API
Overview
Accessibility
CSS Styling
API
Overview
Accessibility
Query Parser
CSS Styling
API
Overview
Accessibility
CSS Styling
API
Overview
Accessibility
CSS Styling
API
Overview
CSS Styling
API
Overview
CSS Styling
API
Overview
Current Time Indicator
Drag & Resize Events
Scheduler Events
Google Calendar Sync
Google Calendar Import/Export
Custom Header
Import & Export Events
Menus
Methods
Resources & Grouping
Time table
Time zones
Views
Windows
Signal R Integration
Accessibility
CSS Styling
API
Overview
Accessibility
CSS Styling
API
Overview
CSS Styling
API
Overview
Accessibility
CSS Styling
API
Overview
Accessibility
CSS Styling
API
Overview
Accessibility
CSS Styling
API
Tooltip is an alternate for the html title. It displays a popup with details on hover.
smart-tooltip
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
Set theanimation property.
<smart-tooltip animation='none'></smart-tooltip>
Set theanimation property by using the HTML Element's instance.
const tooltip = document.querySelector('smart-tooltip');
tooltip.animation = 'simple';
Get theanimation property.
const tooltip = document.querySelector('smart-tooltip');
let animation = tooltip.animation;
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.
Set thealign property.
<smart-tooltip align='left'></smart-tooltip>
Set thealign property by using the HTML Element's instance.
const tooltip = document.querySelector('smart-tooltip');
tooltip.align = 'right';
Get thealign property.
const tooltip = document.querySelector('smart-tooltip');
let align = tooltip.align;
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.
Set thearrow property.
<smart-tooltip arrow></smart-tooltip>
Set thearrow property by using the HTML Element's instance.
const tooltip = document.querySelector('smart-tooltip');
tooltip.arrow = false;
Get thearrow property.
const tooltip = document.querySelector('smart-tooltip');
let arrow = tooltip.arrow;
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.
Set thearrowDirection property.
<smart-tooltip arrow-direction='left'></smart-tooltip>
Set thearrowDirection property by using the HTML Element's instance.
const tooltip = document.querySelector('smart-tooltip');
tooltip.arrowDirection = 'right';
Get thearrowDirection property.
const tooltip = document.querySelector('smart-tooltip');
let arrowDirection = tooltip.arrowDirection;
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.
Set thedelay property.
<smart-tooltip delay='true'></smart-tooltip>
Set thedelay property by using the HTML Element's instance.
const tooltip = document.querySelector('smart-tooltip');
tooltip.delay = false;
Get thedelay property.
const tooltip = document.querySelector('smart-tooltip');
let delay = tooltip.delay;
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.
Set thedisabled property.
<smart-tooltip disabled></smart-tooltip>
Set thedisabled property by using the HTML Element's instance.
const tooltip = document.querySelector('smart-tooltip');
tooltip.disabled = false;
Get thedisabled property.
const tooltip = document.querySelector('smart-tooltip');
let disabled = tooltip.disabled;
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.
Set theoffset property.
<smart-tooltip offset='10,20'></smart-tooltip>
Set theoffset property by using the HTML Element's instance.
const tooltip = document.querySelector('smart-tooltip');
tooltip.offset = 30,50;
Get theoffset property.
const tooltip = document.querySelector('smart-tooltip');
let offset = tooltip.offset;
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.
Set theunlockKey property.
<smart-tooltip unlock-key=''></smart-tooltip>
Set theunlockKey property by using the HTML Element's instance.
const tooltip = document.querySelector('smart-tooltip');
tooltip.unlockKey = '1111-2222-3333-4444-5555';
Get theunlockKey property.
const tooltip = document.querySelector('smart-tooltip');
let unlockKey = tooltip.unlockKey;
Specifies or retrieves the current language setting. This property determines which set of localized messages from themessages property will be used. Changing this value updates the displayed content to match the selected language.
Set thelocale property.
<smart-tooltip locale='de'></smart-tooltip>
Set thelocale property by using the HTML Element's instance.
const tooltip = document.querySelector('smart-tooltip');
tooltip.locale = 'fr';
Get thelocale property.
const tooltip = document.querySelector('smart-tooltip');
let locale = tooltip.locale;
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.
Set thelocalizeFormatFunction property.
<smart-tooltip localize-format-function='function(){return '...'}'></smart-tooltip>
Set thelocalizeFormatFunction property by using the HTML Element's instance.
const tooltip = document.querySelector('smart-tooltip');
tooltip.localizeFormatFunction = function(){return '...'};
Get thelocalizeFormatFunction property.
const tooltip = document.querySelector('smart-tooltip');
let localizeFormatFunction = tooltip.localizeFormatFunction;
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 thelanguage property to support localization and internationalization of the widget's UI elements.
Set themessages 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 themessages 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 themessages property.
const tooltip = document.querySelector('smart-tooltip');
let messages = tooltip.messages;
Specifies or retrieves the method by which the tooltip is activated, such as on hover, focus, or click events.
Set theopenMode property.
<smart-tooltip open-mode='click'></smart-tooltip>
Set theopenMode property by using the HTML Element's instance.
const tooltip = document.querySelector('smart-tooltip');
tooltip.openMode = 'focus';
Get theopenMode property.
const tooltip = document.querySelector('smart-tooltip');
let openMode = tooltip.openMode;
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.
Set theposition property.
<smart-tooltip position='left'></smart-tooltip>
Set theposition property by using the HTML Element's instance.
const tooltip = document.querySelector('smart-tooltip');
tooltip.position = 'right';
Get theposition property.
const tooltip = document.querySelector('smart-tooltip');
let position = tooltip.position;
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.
Set theselector property.
<smart-tooltip selector='selectorId1'></smart-tooltip>
Set theselector property by using the HTML Element's instance.
const tooltip = document.querySelector('smart-tooltip');
tooltip.selector = selectorId2;
Get theselector property.
const tooltip = document.querySelector('smart-tooltip');
let selector = tooltip.selector;
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.
Set thetheme property.
<smart-tooltip theme='blue'></smart-tooltip>
Set thetheme property by using the HTML Element's instance.
const tooltip = document.querySelector('smart-tooltip');
tooltip.theme = 'red';
Get thetheme property.
const tooltip = document.querySelector('smart-tooltip');
let theme = tooltip.theme;
Specifies a custom template for rendering the tooltip content, allowing you to define the layout, styling, and dynamic data displayed within the tooltip.
Set thetooltipTemplate property.
<smart-tooltip tooltip-template='templateId1'></smart-tooltip>
Set thetooltipTemplate property by using the HTML Element's instance.
const tooltip = document.querySelector('smart-tooltip');
tooltip.tooltipTemplate = templateId2;
Get thetooltipTemplate property.
const tooltip = document.querySelector('smart-tooltip');
let tooltipTemplate = tooltip.tooltipTemplate;
When set to true, this property prevents the element from receiving keyboard focus, making it inaccessible through keyboard navigation such as the Tab key.
Set theunfocusable property.
<smart-tooltip unfocusable></smart-tooltip>
Set theunfocusable property by using the HTML Element's instance.
const tooltip = document.querySelector('smart-tooltip');
tooltip.unfocusable = false;
Get theunfocusable property.
const tooltip = document.querySelector('smart-tooltip');
let unfocusable = tooltip.unfocusable;
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.
Set thevalue property.
<smart-tooltip value='Value'></smart-tooltip>
Set thevalue property by using the HTML Element's instance.
const tooltip = document.querySelector('smart-tooltip');
tooltip.value = 'New Value';
Get thevalue property.
const tooltip = document.querySelector('smart-tooltip');
let value = tooltip.value;
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.
Set thevisible property.
<smart-tooltip visible></smart-tooltip>
Set thevisible property by using the HTML Element's instance.
const tooltip = document.querySelector('smart-tooltip');
tooltip.visible = false;
Get thevisible property.
const tooltip = document.querySelector('smart-tooltip');
let visible = tooltip.visible;
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.
Returnstrue if the event was preventedby any of its subscribers.
booleantrue if the default action was prevented.Otherwise, returnsfalse.
The preventDefault() method prevents the default action for a specified event.In this way, the source component suppressesthe built-in behavior that follows the event.
The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.
Set up the event handler ofopen event.
const tooltip = document.querySelector('smart-tooltip');tooltip.addEventListener('open', function (event) {// event handling code goes here.})
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.
Returnstrue if the event was preventedby any of its subscribers.
booleantrue if the default action was prevented.Otherwise, returnsfalse.
The preventDefault() method prevents the default action for a specified event.In this way, the source component suppressesthe built-in behavior that follows the event.
The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.
Set up the event handler ofopening event.
const tooltip = document.querySelector('smart-tooltip');tooltip.addEventListener('opening', function (event) {// event handling code goes here.})
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.
Returnstrue if the event was preventedby any of its subscribers.
booleantrue if the default action was prevented.Otherwise, returnsfalse.
The preventDefault() method prevents the default action for a specified event.In this way, the source component suppressesthe built-in behavior that follows the event.
The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.
Set up the event handler ofclose event.
const tooltip = document.querySelector('smart-tooltip');tooltip.addEventListener('close', function (event) {// event handling code goes here.})
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.
Returnstrue if the event was preventedby any of its subscribers.
booleantrue if the default action was prevented.Otherwise, returnsfalse.
The preventDefault() method prevents the default action for a specified event.In this way, the source component suppressesthe built-in behavior that follows the event.
The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.
Set up the event handler ofclosing event.
const tooltip = document.querySelector('smart-tooltip');tooltip.addEventListener('closing', function (event) {// event handling code goes here.})
Closes the smart-tooltip component, removing the tooltip from view and disabling any tooltip functionality associated with the target element.
Invoke theclose method.
const tooltip = document.querySelector('smart-tooltip');tooltip.close();
Displays the smart-tooltip component, providing contextual information or guidance to the user when triggered.
Invoke theopen method.
const tooltip = document.querySelector('smart-tooltip');tooltip.open();
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 thetoggle method.
const tooltip = document.querySelector('smart-tooltip');tooltip.toggle();
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 theclear method.
const tooltip = document.querySelector('smart-tooltip');tooltip.clear();
Default smartTooltip arrow width
smartTooltip arrow color
smartTooltip arrow translation (transformation)
smartTooltip padding