Migration from Essential® JS 1

2 Mar 20253 minutes to read

This article describes the API migration process of Tooltip component from Essential® JS 1 to Essential® JS 2

Behavior API in Essential® JS 1 API in Essential® JS 2
Position Property: position
<ej-tooltip id="tooltip" content="Tooltip Content">
<e-tooltip-position>
<e-target horizontal="center" vertical="top" />
<e-stem horizontal="center" vertical="bottom" />
</e-tooltip-position>
</ej-tooltip> 		Property: position
<ejs-tooltip position="TopCenter" />
Animation Property: animation
<ej-tooltip id="tooltip" content="Tooltip Content" >
<e-tooltip-animation effect="Fade" speed="1000"/>
</ej-tooltip> 		Property: animation
List<Object> animation = new List<Object>();
animation.Add(new { open = new { effect = "FadeIn" }, close = new { effect = "fadeOut" } });
ViewBag.animation = animation;

<ejs-tooltip id="tooltip" animation="ViewBag.animation" />
Close Time Out Property: autoCloseTimeout
<ej-tooltip id="tooltip" content="Tooltip Content" auto-close-timeout="200" close-mode="Auto" /> 		Property: closeDelay, openDelay
<ejs-tooltip id="tooltip" closeDelay="500" />
Sticky Mode Property : closeMode
<ej-tooltip id="tooltip" content="Tooltip Content" close-mode="Sticky" /> 		Property: isSticky
<ejs-tooltip id="tooltip" isSticky="true" position="TopCenter" />
Offset from target Not Applicable Property: offsetX/ offsetY
<ejs-tooltip id="tooltip" offsetX="10" offsetY="10" />;
Open mode of Tooltip Not Applicable Property: opensOn
<ejs-tooltip id="tooltip" opensOn="Click" />
Enable disable the tip of Tooltip Not Applicable Property: showTipPointer
<ejs-tooltip id="tooltip" showTipPointer="true" />
Hide Method: hide()
<ej-tooltip id="tooltip" content="Tooltip Content" />

var tooltipObj = $("#tooltip").ejTooltip("instance");
tooltipObj.hide(); 		Method: close()
<ejs-tooltip id="tooltip" opensOn="Custom" content="Tooltip Content" />

var tooltipObj = document.getElementById('tooltip').ej2_instances[0];
tooltipObj.close();
Show Method: show()
<ej-tooltip id="tooltip" content="Tooltip Content" />

var tooltipObj = $("#tooltip").ejTooltip("instance");
tooltipObj.show(); 		Method: open()
<ejs-tooltip id="tooltip" opensOn="Custom" content="Tooltip Content" />

var tooltipObj = document.getElementById('tooltip').ej2_instances[0];
tooltipObj.open();
Enable Method: enable()
<ej-tooltip id="tooltip" content="Tooltip Content" />

var tooltipObj = $("#tooltip").ejTooltip("instance");
tooltipObj.enable(); 		Method: destroy()
<ejs-tooltip id="tooltip" content="Tooltip Content" />

var tooltipObj = document.getElementById('tooltip').ej2_instances[0];
tooltipObj.destroy();
Close Event: close
<ej-tooltip id="tooltip" content="Tooltip Content" close="onClose" />

function onClose(args) { } 		Event: afterClose
<ejs-tooltip id="tooltip" content="Tooltip Content" afterClose="onAfterClose" />

function onAfterClose() { }
Open Event: open
<ej-tooltip id="tooltip" content="Tooltip Content" open="onOpen" />

function onOpen(args) { } 		Event: afterOpen
<ejs-tooltip id="tooltip" content="Tooltip Content" afterOpen="onAfterOpen" />

function onAfterOpen() { }
Before Collision Not Applicable Event: beforeCollision
<ejs-tooltip id="tooltip" content="Tooltip Content" beforeCollision="onBeforeCollision" />

function onBeforeCollision() { }
Tracking Event: tracking
<ej-tooltip id="tooltip" content="Tooltip Content" tracking="onTracking" associate="mouse" />

function onTracking(args) { } 		Method: mouseTrail
<ejs-tooltip id="tooltip" mouseTrail="true" />