Ej1 api migration in React Tooltip component

17 Mar 20254 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

public position = { target: { horizontal: "center", vertical: "top" },
stem: { horizontal: "center", vertical: "bottom" } };

<EJ.Tooltip id='tooltip' position={this.position}>
</EJ.Tooltip>
Property: position

<TooltipComponent position='TopCenter'>
</TooltipComponent>
Animation Property: animation

public animation = { animation :{ effect : "slide", speed : 1000} };

<EJ.Tooltip id='tooltip' animation={this.animation}>
</EJ.Tooltip>
Property: animation

public animation = { open: { effect: ‘FadeIn’,
duration: 150, delay: 0 },
close: { effect: ‘FadeOut’,
duration: 150, delay: 0 } };

<TooltipComponent position='TopCenter'
animation={this.animation}>
</TooltipComponent>
Close Time Out Property: autoCloseTimeout

<EJ.Tooltip id='tooltip' autoCloseTimeout={5000} >
</EJ.Tooltip> 		Property: closeDelay, openDelay

<TooltipComponent position='TopCenter'
closeDelay={500} >
</TooltipComponent>
Sticky Mode Property : closeMode

<EJ.Tooltip id='tooltip' closeMode="sticky">
</EJ.Tooltip>
Property: isSticky

<TooltipComponent position='TopCenter'
isSticky={true}>
</TooltipComponent>
Offset from target Property : tip.adjust.xValue/ tip.adjust.yValue

public tip = { size: { width: 25, height: 12 },
adjust: { xValue: 5, yValue: 6 } };

<EJ.Tooltip id='tooltip' tip={this.tip}>
</EJ.Tooltip>
Property: offSetX/ offSetY

<TooltipComponent position='TopCenter'
offsetX={10} offsetY={10}>
</TooltipComponent>
Mouse trail on target Not Applicable Property: mouseTrail

<TooltipComponent mouseTrail={true}>
</TooltipComponent>
Open mode of Tooltip Not Applicable Property: opensOn

<TooltipComponent opensOn='Click'>
</TooltipComponent>
Enable disable the tip of Tooltip Not Applicable Property: showTipPointer

<TooltipComponent showTipPointer={true}>
</TooltipComponent>
Hide Method: hide()

<EJ.Tooltip id='tooltip' content="Tooltip Content">
</EJ.Tooltip>

let toolTipObj = ${"$tooltip"}.ejTooltip("instance");

toolTipObj.hide();
Method: close()

<TooltipComponent cssClass='e-tooltip-css'
opensOn='Custom'
content='Tooltip from custom mode'>
</TooltipComponent>

toolTipObj.close();
Show Method: show()

<EJ.Tooltip id='tooltip' content="Tooltip Content">
</EJ.Tooltip>

let toolTipObj = ${"$tooltip"}.ejTooltip("instance");

toolTipObj.show();
Method: open()

<TooltipComponent cssClass='e-tooltip-css'
opensOn='Custom'
content='Tooltip from custom mode'>
</TooltipComponent>

toolTipObj.open();
Enable Method: enable()

<EJ.Tooltip id='tooltip' content="Tooltip Content">
</EJ.Tooltip>

let toolTipObj = ${"$tooltip"}.ejTooltip("instance");

toolTipObj.enable();
Method: destroy()

<TooltipComponent cssClass='e-tooltip-css'
content='Tooltip from custom mode'>
</TooltipComponent>

toolTipObj.destroy();
Close Event: close

public close (args: Event): void { }

<EJ.Tooltip id='tooltip' close={this.close};
content="Tooltip Content">
</EJ.Tooltip>
Event: afterClose

<TooltipComponent afterClose={this.afterClose}>
</TooltipComponent>

public afterClose(args: Event): void { }
Open Event: open

public open (args: Event): void { };

<EJ.Tooltip id='tooltip' open={this.open}
content="Tooltip Content">
</EJ.Tooltip>
Event: afterOpen

<TooltipComponent afterOpen={this.afterOpen}>
</TooltipComponent>

public afterOpen(args: Event): void { }
Before Collision Not Applicable Event: beforeCollision

<TooltipComponent beforeCollision={this.beforeCollision}>
</TooltipComponent>

public beforeCollision(args: Event): void { }
Tracking Event: tracking

public tracking (args: Event): void { };

<EJ.Tooltip id='tooltip' tracking={this.tracking}
content="Tooltip Content" associate="mouse">
</EJ.Tooltip>
Method: open(),close(),refresh()

Sample