Ej1 api migration in Angular Tooltip component

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