Ej1 api migration in EJ2 TypeScript Tooltip control

8 May 20235 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
var tooltip = new ej.Tooltip($(“#test”),{
position: {
target: {
horizontal: “center”,
vertical: “top”
},
stem: {
horizontal: “center”,
vertical: “bottom”
}
}
});		 Property: position
let tooltip: Tooltip = new Tooltip({
position : ‘TopCenter’
});
tooltip.appendTo(‘#test);
Animation Property: animation
var tooltip =new ej.Tooltip($(“#test”),{
animation :{ effect : “slide”, speed : 1000}
});
Property: animation
let tooltip: Tooltip = new Tooltip({
position : ‘TopCenter’,
animation:{
open: { effect: ‘FadeIn’, duration:
150, delay: 0 },
close: { effect: ‘FadeOut’, duration: 150, delay: 0 }
}
});
tooltip.appendTo(‘#test);
Close Time Out Property: autoCloseTimeout
var tooltip =new ej.Tooltip($(“#test”),{
autoCloseTimeout : 5000
});		 Property: closeDelay, openDelay
let tooltip: Tooltip = new Tooltip({
position : ‘TopCenter’,
closeDelay : 500
});
tooltip.appendTo(‘#test);
Sticky Mode Property : closeMode
var tooltip =new ej.Tooltip($(“#test”),{
closeMode : “sticky”
});		 Property: isSticky
let tooltip: Tooltip = new Tooltip({
position : ‘TopCenter’,
isSticky : true
});
tooltip.appendTo(‘#test);
Offset from target Property : tip.adjust.xValue/ tip.adjust.yValue
var tooltip =new ej.Tooltip($(“#test”),{
tip :{
size : { width : 25, height : 12},
adjust : {xValue : 5, yValue: 6}
}
});		 Property: offsetX/ offsetY
let tooltip: Tooltip = new Tooltip({
position : ‘TopCenter’,
offsetX : 10,
offsetY : 10
});
tooltip.appendTo(‘#test);
Mouse trail on target Not Applicable Property: mouseTrail
let tooltip: Tooltip = new Tooltip({
mouseTrail: true,
});
tooltip.appendTo(‘#test);
Open mode of tooltip Not Applicable Property: opensOn
let tooltip: Tooltip = new Tooltip({
opensOn: ‘Click’,
});
tooltip.appendTo(‘#test);
Enable disable the tip of tooltip Not Applicable Property: showTipPointer
let tooltip: Tooltip = new Tooltip({
showTipPointer: false,
});
tooltip.appendTo(‘#test);
Hide Method: hide()
var tooltip = new ej.Tooltip($(“#test”),{
content: “JavaScript is the programming language of HTML and the Web.” }).data(“ejTooltip”);
tooltip.hide();		 Method: close()
let tooltip: Tooltip = new Tooltip({
cssClass: ‘e-tooltip-css’,
opensOn: ‘Custom’,
content: ‘Tooltip from custom mode’
});
tooltip.appendTo(‘#test);
tooltip.close();
Show Method: show()
var tooltip = new ej.Tooltip($(“#test”),{
content: “JavaScript is the programming language of HTML and the Web.” }).data(“ejTooltip”);
tooltip.show();		 Method: open()
let tooltip: Tooltip = new Tooltip({
cssClass: ‘e-tooltip-css’,
content: ‘Tooltip from custom mode’
});
tooltip.appendTo(‘#test);
tooltip.open();
Enable Method: enable()
var tooltip = new ej.Tooltip($(“#test”),{
content: “JavaScript is the programming language of HTML and the Web.” });
tooltip.enable();		 Method: destroy()
let tooltip: Tooltip = new Tooltip({
cssClass: ‘e-tooltip-css’,
content: ‘Tooltip from custom mode’
});
tooltip.appendTo(‘#test);
tooltip.destory();
Close Event: close
var tooltip = new ej.Tooltip($(“#test”),{
content: “JavaScript is the programming language of HTML and the Web.”, close: function (args) {}
});		 Event: afterClose
let tooltip: Tooltip = new Tooltip({
afterClose: function(e: Event): void { }
});
tooltip.appendTo(‘#test);
Open Event: open
var tooltip = new ej.Tooltip($(“#test”),{
content: “JavaScript is the programming language of HTML and the Web.”, open: function (args) {}
});		 Event: afterOpen
let tooltip: Tooltip = new Tooltip({
afterOpen: function(e: Event : void { }
});
tooltip.appendTo(‘#test);
Before Collision Not Applicable Event: beforeCollision
let tooltip: Tooltip = new Tooltip({
beforeCollision: function(e: Event): void { }
});
tooltip.appendTo(‘#test);
Tracking Event: tracking
var tooltip =new ej.Tooltip($(“#test”),{
content: “JavaScript is the programming language of HTML and the Web.”, associate :”mouse”,
tracking: function (args) {}
});		 Method: open(),close(),refresh()
let tooltip: Tooltip = new Tooltip({
content: ‘Drag me anywhere, to start walking with me !!!’,
offsetX: -15,
target: ‘#demoSmart’,
animation: { open: { effect: ‘None’ }, close: { effect: ‘None’ } }
});
tooltip.appendTo(‘#test’);
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();
}
});