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 content='Tooltip' [position]='target'>Tooltip</ej-tooltip>public target = { target: { horizontal: 'center',vertical: 'top'},stem: {horizontal: 'center',vertical: 'bottom'} |
Property: position <ejs-tooltip position="TopCenter" content='Tooltip'>Tooltip</ejs-tooltip> |
| Animation | Property: animation <ej-tooltip content='Tooltip' [animation ]='animation '>Tooltip</ej-tooltip>public animation = { effect : "slide", speed : 1000}; |
Property: animation <ejs-tooltip [animation]="animation" content='Tooltip'>Tooltip</ejs-tooltip>public animation = { open: { effect: 'FadeIn', duration: 150, delay: 0 }, close: { effect: 'FadeOut', duration: 150, delay: 0 } } |
| Close Time Out | Property: autoCloseTimeout <ej-tooltip content='Tooltip' autoCloseTimeout=5000>Tooltip</ej-tooltip> |
Property: closeDelay, openDelay <ejs-tooltip [openDelay]="500" [closeDelay]="500" content='Tooltip'>Tooltip</ejs-tooltip> |
| Sticky Mode | Property : closeMode <ej-tooltip content='Tooltip' closeMode ='sticky'>Tooltip</ej-tooltip> |
Property: isSticky <ejs-tooltip [isSticky]="true" content='Tooltip'>Tooltip</ejs-tooltip> |
| Offset from target | Property : tip.adjust.xValue/ tip.adjust.yValue <ej-tooltip content='Tooltip' [tip ]='tip '>Tooltip</ej-tooltip>public tip = { size : { width : 25, height : 12}, adjust : {xValue : 5, yValue: 6}}; |
Property: offsetX/ offsetY <ejs-tooltip [offsetX]="10" [offsetY]="10" content='Tooltip'>Tooltip</ejs-tooltip> |
| Mouse trail on target | Property : associate <ej-tooltip content='Tooltip' associate='mouse'>Tooltip</ej-tooltip> |
Property: mouseTrail <ejs-tooltip [mouseTrail]="true" content='Tooltip'>Tooltip</ejs-tooltip> |
| Open mode of tooltip | Not Applicable | Property: opensOn <ejs-tooltip [opensOn]="Click" content='Tooltip'>Tooltip</ejs-tooltip> |
| Enable disable the tip of tooltip | Property : isBalloon <ej-tooltip content='Tooltip' [isBalloon]='false'>Tooltip</ej-tooltip> |
Property: showTipPointer <ejs-tooltip [showTipPointer]="false" content='Tooltip'>Tooltip</ejs-tooltip> |
| Hide | Method: hide() <ej-tooltip #tooltipInstance content='Tooltip'>Tooltip</ej-tooltip>this.tooltipInstance.widget.hide(); |
Method: close() <ejs-tooltip #tooltipInstance content='Tooltip'>Tooltip</ejs-tooltip>this.tooltipInstance.close(); |
| Show | Method: show() <ej-tooltip #tooltipInstance content='Tooltip'>Tooltip</ej-tooltip>this.tooltipInstance.widget.show(); |
Method: open() <ejs-tooltip #tooltipInstance content='Tooltip'>Tooltip</ejs-tooltip>this.tooltipInstance.open(); |
| Close | Event: close <ej-tooltip content='Tooltip' (close)="close">Tooltip</e-tooltip>public close() { }; |
Event: afterClose <ejs-tooltip content='Tooltip' (afterClose)="onAfterClose">Tooltip</ejs-tooltip>public onAfterClose() { }; |
| Open | Event: open <ej-tooltip content='Tooltip' (open )="open ">Tooltip</e-tooltip>public open () { }; |
Event: afterOpen <ejs-tooltip content='Tooltip' (onAfterOpen)="afterOpen">Tooltip</ejs-tooltip>public onAfterOpen() { }; |
| Before Collision | Not Applicable | Event: beforeCollision <ejs-tooltip content='Tooltip' (onBeforeCollision)="beforeCollision">Tooltip</ejs-tooltip>public onBeforeCollision() { }; |
| Tracking | Event: tracking <ej-tooltip content='Tooltip' (tracking )="tracking ">Tooltip</e-tooltip>public tracking () { }; |
Method: open(),close(),refresh() <ejs-tooltip #tooltip id="targetContainer" #tooltip content="Drag me anywhere, to start walking with me !!!" [offsetX]="-15" target="#demoSmart" [animation]="tooltipAnimation"><div id="demoSmart"> </div></ejs-tooltip>let ele: HTMLElement = document.getElementById('demoSmart');let drag: Draggable = new Draggable(ele, {clone: false,dragArea: '#targetContainer',drag: (args: any) => {if (args.element.getAttribute('data-tooltip-id') === null) {tooltip.open(args.element);} else {tooltip.refresh(args.element);}},dragStart: (args: any) => {if (args.element.getAttribute('data-tooltip-id') !== null) { return; }tooltip.open(args.element);},dragStop: (args: any) => {tooltip.close();}}); |