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(); } }); |