Ej1 api migration in React Tooltip component
30 Jan 20234 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 |