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

@Html.EJ().Tooltip("tooltip").Content("Tooltip content").Position(e => e.Target(target => target.Horizontal("right").Vertical("center")).Stem(e => e.Horizontal("left").Vertical("center"))) 		Property: Position

@Html.EJS().Tooltip("tooltip").Position(Syncfusion.EJ2.Popups.Position.TopCenter)
Animation Property: Animation

@Html.EJ().Tooltip("tooltip").Content("Tooltip content").Animation(e => e.Effect(Effect.Fade).Speed(200)) 		Property: Animation

List<Object> animation = new List<Object>();
animation.Add(new { open = new { effect = "FadeIn" }, close = new { effect = "fadeOut" } });
ViewBag.animation = animation;

@Html.EJS().Tooltip("tooltip").Animation(ViewBag.animation)
Close Time Out Property: AutoCloseTimeout

@Html.EJ().Tooltip("tooltip").Content("Tooltip content").AutoCloseTimeout(2000).CloseMode(CloseMode.Auto) 		Property: CloseDelay, openDelay

@Html.EJS().Tooltip("tooltip").CloseDelay(500)
Sticky Mode Property : CloseMode

@Html.EJ().Tooltip("tooltip").Content("Tooltip content").CloseMode(CloseMode.Sticky) 		Property: IsSticky

@Html.EJS().Tooltip("tooltip").IsSticky(true)
Offset from target Not Applicable Property: OffsetX/OffsetY

@Html.EJS().Tooltip("tooltip").OffsetX(10).OffsetY(10);
Open mode of Tooltip Not Applicable Property: OpensOn

@Html.EJS().Tooltip("tooltip").OpensOn("Click")
Enable disable the tip of Tooltip Not Applicable Property: ShowTipPointer

@Html.EJS().Tooltip("tooltip").ShowTipPointer(true)
Hide Method: hide()

@Html.EJ().Tooltip("tooltip").Content("Tooltip content")

var tooltipObj = $("#tooltip").ejTooltip("instance");
tooltipObj.hide(); 		Method: close()

@Html.EJS().Tooltip("tooltip").OpensOn("Custom")

var tooltipObj = document.getElementById('tooltip').ej2_instances[0];
tooltipObj.close();
Show Method: show()

@Html.EJ().Tooltip("tooltip").Content("Tooltip content")

var tooltipObj = $("#tooltip").ejTooltip("instance");
tooltipObj.show(); 		Method: open()

@Html.EJS().Tooltip("tooltip").OpensOn("Custom")

var tooltipObj = document.getElementById('tooltip').ej2_instances[0];
tooltipObj.open();
Enable Method: enable()

@Html.EJ().Tooltip("tooltip").Content("Tooltip content")

var tooltipObj = $("#tooltip").ejTooltip("instance");
tooltipObj.enable(); 		Method: destroy()

@Html.EJS().Tooltip("tooltip").OpensOn("Custom")

var tooltipObj = document.getElementById('tooltip').ej2_instances[0];
tooltipObj.destroy();
Close Event: close

@Html.EJ().Tooltip("tooltip").Content("Tooltip content").ClientSideEvents(e => e.Close("onClose"))

function onClose(args) { } 		Event: AfterClose

@Html.EJS().Tooltip("tooltip").AfterClose("onAfterClose")

function onAfterClose() { }
Open Event: open

@Html.EJ().Tooltip("tooltip").Content("Tooltip content").ClientSideEvents(e => e.Open("onOpen"))

function onOpen(args) { } 		Event: AfterOpen

@Html.EJS().Tooltip("tooltip").AfterOpen("onAfterOpen")

function onAfterOpen() { }
Before Collision Not Applicable Event: BeforeCollision

@Html.EJS().Tooltip("tooltip").BeforeCollision("onBeforeCollision")

function onBeforeCollision() { }
Tracking Event: tracking

@Html.EJ().Tooltip("sample").Content("Tooltip content").ClientSideEvents(e => e.Tracking("onTracking")).Associate(Associate.MouseFollow)

function onTracking(args) { } 		Method: MouseTrail

@Html.EJS().Tooltip("tooltip").MouseTrail(true)