ejTooltip
3 Aug 201824 minutes to read
The Tooltip control will display a popup hint when the user hover/click/focus to the element.
Example
<div style="width:600px; margin: 0 auto;">
JavaScript(JS) is a high-level, dynamic, untyped, and interpreted programming language.It has been standardized in the
<a>
<ej-tooltip [content]="content" [allowKeyboardNavigation]=true>
<u> ECMAScript </u>
</ej-tooltip>
</a>
language specification.Alongside HTML and CSS, it is one of the three essential technologies of World Wide Web content production;
the majority of websites employ it and it is supported by all modern Web browsers without plug-ins. JS is prototype-based
with first-class functions and supporting object-oriented, imperative, and functional programming styles.
</div>
import { Component } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html'
})
export class DefaultComponent {
content: string;
width: string;
constructor() {
this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standardized by ECMA International in ECMA-262 and ISO/IEC 16262.';
this.width = '270px';
}
}
Requires
- module:jQuery
- module:jQuery.easing.1.3.js
- module:ej.core.js
Members
allowKeyboardNavigation boolean
Tooltip control can be accessed through the keyboard shortcut keys.
Default Value
- true
Example
<div style="width:600px; margin: 0 auto;">
JavaScript(JS) is a high-level, dynamic, untyped, and interpreted programming language.It has been standardized in the
<a>
<ej-tooltip [content]="content" [allowKeyboardNavigation]=true>
<u> ECMAScript </u>
</ej-tooltip>
</a>
language specification.Alongside HTML and CSS, it is one of the three essential technologies of World Wide Web content production;
the majority of websites employ it and it is supported by all modern Web browsers without plug-ins. JS is prototype-based
with first-class functions and supporting object-oriented, imperative, and functional programming styles.
</div>
import { Component } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html'
})
export class DefaultComponent {
content: string;
width: string;
constructor() {
this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standardized by ECMA International in ECMA-262 and ISO/IEC 16262.';
this.width = '270px';
}
}
animation object
Specifies the animation behavior in Tooltip. It contains the following sub properties.
Name |
Type |
Default |
Description |
---|---|---|---|
effect |
Enum |
None |
Determines the type of effect. The possible values are fade, slide and none |
speed |
integer |
0 |
Sets the animation speed in milliseconds. |
animation.effect enum
Determines the type of effect.
Default Value
- ej.Tooltip.Effect.None
Name | Description |
---|---|
None | No animation takes place when showing/hiding the Tooltip |
Slide | Sliding effect takes place when showing/hiding the Tooltip |
Fade | Fade the Tooltip in and out of visibility. |
animation.speed number
Sets the animation speed in milliseconds.
Default Value
- 4000
associate enum
Sets the position related to target element, window, mouse or (x,y) co-ordinates.
Default Value
- ej.Tooltip.Associate.Target
Name | Description |
---|---|
Target | Sets the position related to target element. |
MouseFollow | Sets the position related to mouse. |
MouseEnter | Sets the position related to mouse, first entry to the target element. |
Axis | Sets the position related to (x,y) co-ordinates. |
Window | Sets the position related to browser window. |
Example
<div style="width:600px; margin: 0 auto;">
JavaScript(JS) is a high-level, dynamic, untyped, and interpreted programming language.It has been standardized in the
<a>
<ej-tooltip [content]="content" [allowKeyboardNavigation]=true [animation]="animation" associate="axis">>
<u> ECMAScript </u>
</ej-tooltip>
</a>
language specification.Alongside HTML and CSS, it is one of the three essential technologies of <a> <ej-tooltip id="www" [content]="www" [width]="widthWWW" [position]="position"><u>World Wide Web</u></ej-tooltip></a> content production;
the majority of websites employ it and it is supported by all modern Web browsers without plug-ins. JS is prototype-based
with first-class functions and supporting <a> <ej-tooltip id="obj" [content]="objLanguage" [width]="widthObj" [position]="positionObj"><u>object-oriented</u></ej-tooltip></a>, imperative, and functional programming styles.
</div>
import { Component } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html'
})
export class DefaultComponent {
content: string;
width: string;
www: string;
widthWWW: string;
position: Object;
objLanguage: string;
widthObj: string;
positionObj: Object;
animation: Object;
constructor() {
this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standardized by ECMA International in ECMA-262 and ISO/IEC 16262.';
this.width = '270px';
this.www = "The World Wide Web (WWW) is an information space where documents and other web resources are identified by URLs, interlinked by hypertext links, and can be accessed via the Internet.";
this.widthWWW = "40%";
this.position = {
stem: {
horizontal: "left",
vertical: "center"
},
target: {
horizontal: "right",
vertical: "center",
},
};
this.objLanguage = "Object-oriented programming (OOP) is a programming language model organized around objects rather than 'actions' and data rather than logic.";
this.widthObj = "35%";
this.positionObj = {
stem: {
horizontal: "right",
vertical: "center"
},
target: {
horizontal: "left",
vertical: "center",
},
};
this.animation = { effect : "slide", speed : 1000};
}
}
<div style="width:600px; margin: 0 auto;">
JavaScript(JS) is a high-level, dynamic, untyped, and interpreted programming language.It has been standardized in the
<a>
<ej-tooltip [content]="content" [allowKeyboardNavigation]=true [animation]="animation" associate="mousefollow">
<u> ECMAScript </u>
</ej-tooltip>
</a>
language specification.Alongside HTML and CSS, it is one of the three essential technologies of <a> <ej-tooltip id="www" [content]="www" [width]="widthWWW" [position]="position"><u>World Wide Web</u></ej-tooltip></a> content production;
the majority of websites employ it and it is supported by all modern Web browsers without plug-ins. JS is prototype-based
with first-class functions and supporting <a> <ej-tooltip id="obj" [content]="objLanguage" [width]="widthObj" [position]="positionObj"><u>object-oriented</u></ej-tooltip></a>, imperative, and functional programming styles.
</div>
import { Component } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html'
})
export class DefaultComponent {
content: string;
width: string;
www: string;
widthWWW: string;
position: Object;
objLanguage: string;
widthObj: string;
positionObj: Object;
animation: Object;
constructor() {
this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standardized by ECMA International in ECMA-262 and ISO/IEC 16262.';
this.width = '270px';
this.www = "The World Wide Web (WWW) is an information space where documents and other web resources are identified by URLs, interlinked by hypertext links, and can be accessed via the Internet.";
this.widthWWW = "40%";
this.position = {
stem: {
horizontal: "left",
vertical: "center"
},
target: {
horizontal: "right",
vertical: "center",
},
};
this.objLanguage = "Object-oriented programming (OOP) is a programming language model organized around objects rather than 'actions' and data rather than logic.";
this.widthObj = "35%";
this.positionObj = {
stem: {
horizontal: "right",
vertical: "center"
},
target: {
horizontal: "left",
vertical: "center",
},
};
this.animation = { effect : "slide", speed : 1000};
}
}
And also, absolute positioning via horizontal(x), vertical(y) e.g. A Tooltip at 10px from left and top of the page:
autoCloseTimeout number
Specified the delay to hide Tooltip when closeMode is auto.
Default Value
- 4000
Example
<div style="width:600px; margin: 0 auto;">
JavaScript(JS) is a high-level, dynamic, untyped, and interpreted programming language.It has been standardized in the
<a>
<ej-tooltip [content]="content" [allowKeyboardNavigation]=true [animation]="animation" [autoCloseTimeout]="autoCloseTimeout">
<u> ECMAScript </u>
</ej-tooltip>
</a>
language specification.Alongside HTML and CSS, it is one of the three essential technologies of <a> <ej-tooltip id="www" [content]="www" [width]="widthWWW" [position]="position"><u>World Wide Web</u></ej-tooltip></a> content production;
the majority of websites employ it and it is supported by all modern Web browsers without plug-ins. JS is prototype-based
with first-class functions and supporting <a> <ej-tooltip id="obj" [content]="objLanguage" [width]="widthObj" [position]="positionObj"><u>object-oriented</u></ej-tooltip></a>, imperative, and functional programming styles.
</div>
import { Component } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html'
})
export class DefaultComponent {
content: string;
width: string;
www: string;
widthWWW: string;
position: Object;
objLanguage: string;
widthObj: string;
positionObj: Object;
animation: Object;
autoCloseTimeout: number:
constructor() {
this.autoCloseTimeout = 5000;
this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standardized by ECMA International in ECMA-262 and ISO/IEC 16262.';
this.width = '270px';
this.www = "The World Wide Web (WWW) is an information space where documents and other web resources are identified by URLs, interlinked by hypertext links, and can be accessed via the Internet.";
this.widthWWW = "40%";
this.position = {
stem: {
horizontal: "left",
vertical: "center"
},
target: {
horizontal: "right",
vertical: "center",
},
};
this.objLanguage = "Object-oriented programming (OOP) is a programming language model organized around objects rather than 'actions' and data rather than logic.";
this.widthObj = "35%";
this.positionObj = {
stem: {
horizontal: "right",
vertical: "center"
},
target: {
horizontal: "left",
vertical: "center",
},
};
this.animation = { effect : "slide", speed : 1000};
}
}
closeMode enum
Specifies the closing behavior of Tooltip popup.
Default Value
- ej.Tooltip.CloseMode.None
Name | Description |
---|---|
Sticky | Enables close button in Tooltip. |
Auto | Sets the delay for Tooltip close |
None | The Tooltip will be display normally. |
Example
<div style="width:600px; margin: 0 auto;">
JavaScript(JS) is a high-level, dynamic, untyped, and interpreted programming language.It has been standardized in the
<a>
<ej-tooltip [content]="content" closeMode="sticky" [allowKeyboardNavigation]=true [animation]="animation">
<u> ECMAScript </u>
</ej-tooltip>
</a>
language specification.Alongside HTML and CSS, it is one of the three essential technologies of <a> <ej-tooltip id="www" [content]="www" [width]="widthWWW" [position]="position"><u>World Wide Web</u></ej-tooltip></a> content production;
the majority of websites employ it and it is supported by all modern Web browsers without plug-ins. JS is prototype-based
with first-class functions and supporting <a> <ej-tooltip id="obj" [content]="objLanguage" [width]="widthObj" [position]="positionObj"><u>object-oriented</u></ej-tooltip></a>, imperative, and functional programming styles.
</div>
import { Component } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html'
})
export class DefaultComponent {
content: string;
width: string;
www: string;
widthWWW: string;
position: Object;
objLanguage: string;
widthObj: string;
positionObj: Object;
animation: Object;
constructor() {
this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standardized by ECMA International in ECMA-262 and ISO/IEC 16262.';
this.width = '270px';
this.www = "The World Wide Web (WWW) is an information space where documents and other web resources are identified by URLs, interlinked by hypertext links, and can be accessed via the Internet.";
this.widthWWW = "40%";
this.position = {
stem: {
horizontal: "left",
vertical: "center"
},
target: {
horizontal: "right",
vertical: "center",
},
};
this.objLanguage = "Object-oriented programming (OOP) is a programming language model organized around objects rather than 'actions' and data rather than logic.";
this.widthObj = "35%";
this.positionObj = {
stem: {
horizontal: "right",
vertical: "center"
},
target: {
horizontal: "left",
vertical: "center",
},
};
this.animation = { effect : "slide", speed : 1000};
}
}
collision enum
Sets the Tooltip in alternate position when collision occurs.
Default Value
- ej.Tooltip.Collision.FlipFit
Name | Description |
---|---|
Flip | Flips the Tooltip to the opposite side of the target, if collision is occurs. |
Fit | Shift the Tooltip popup away from the edge of the window(collision side) that means adjacent position. |
FlipFit | Ensure as much of the element is visible as possible to showcase. |
None | No collision detection is take place |
Example
<div style="width:600px; margin: 0 auto;">
JavaScript(JS) is a high-level, dynamic, untyped, and interpreted programming language.It has been standardized in the
<a>
<ej-tooltip [content]="content" collision="flip" [allowKeyboardNavigation]=true [animation]="animation">
<u> ECMAScript </u>
</ej-tooltip>
</a>
language specification.Alongside HTML and CSS, it is one of the three essential technologies of <a> <ej-tooltip id="www" [content]="www" [width]="widthWWW" [position]="position"><u>World Wide Web</u></ej-tooltip></a> content production;
the majority of websites employ it and it is supported by all modern Web browsers without plug-ins. JS is prototype-based
with first-class functions and supporting <a> <ej-tooltip id="obj" [content]="objLanguage" [width]="widthObj" [position]="positionObj"><u>object-oriented</u></ej-tooltip></a>, imperative, and functional programming styles.
</div>
import { Component } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html'
})
export class DefaultComponent {
content: string;
width: string;
www: string;
widthWWW: string;
position: Object;
objLanguage: string;
widthObj: string;
positionObj: Object;
animation: Object;
constructor() {
this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standardized by ECMA International in ECMA-262 and ISO/IEC 16262.';
this.width = '270px';
this.www = "The World Wide Web (WWW) is an information space where documents and other web resources are identified by URLs, interlinked by hypertext links, and can be accessed via the Internet.";
this.widthWWW = "40%";
this.position = {
stem: {
horizontal: "left",
vertical: "center"
},
target: {
horizontal: "right",
vertical: "center",
},
};
this.objLanguage = "Object-oriented programming (OOP) is a programming language model organized around objects rather than 'actions' and data rather than logic.";
this.widthObj = "35%";
this.positionObj = {
stem: {
horizontal: "right",
vertical: "center"
},
target: {
horizontal: "left",
vertical: "center",
},
};
this.animation = { effect : "slide", speed : 1000};
}
}
containment string
Specified the selector for the container element.
Default Value
- body
Example
<div class="frame">
<div class="control">
TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
</div>
</div>
<a>
<ej-tooltip [content]="content" [containment]="container">
<u> JavaScript </u>
</ej-tooltip>
</a>
import { Component } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html'
})
export class DefaultComponent {
content: string;
width: string;
container: string;
constructor() {
this.content = 'JavaScript is the programming language of HTML and the Web.';
this.width = '270px';
this.container=".frame";
}
content string
Specifies the text for Tooltip.
Default Value
- null
Example
<div style="width:600px; margin: 0 auto;">
JavaScript(JS) is a high-level, dynamic, untyped, and interpreted programming language.It has been standardized in the
<a>
<ej-tooltip [content]="content">
<u> ECMAScript </u>
</ej-tooltip>
</a>
language specification.Alongside HTML and CSS, it is one of the three essential technologies of <a> <ej-tooltip id="www" [content]="www" [width]="widthWWW" [position]="position"><u>World Wide Web</u></ej-tooltip></a> content production;
the majority of websites employ it and it is supported by all modern Web browsers without plug-ins. JS is prototype-based
with first-class functions and supporting <a> <ej-tooltip id="obj" [content]="objLanguage" [width]="widthObj" [position]="positionObj"><u>object-oriented</u></ej-tooltip></a>, imperative, and functional programming styles.
</div>
import { Component } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html'
})
export class DefaultComponent {
content: string;
width: string;
www: string;
widthWWW: string;
position: Object;
objLanguage: string;
widthObj: string;
positionObj: Object;
constructor() {
this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standardized by ECMA International in ECMA-262 and ISO/IEC 16262.';
this.width = '270px';
this.www = "The World Wide Web (WWW) is an information space where documents and other web resources are identified by URLs, interlinked by hypertext links, and can be accessed via the Internet.";
this.widthWWW = "40%";
this.position = {
stem: {
horizontal: "left",
vertical: "center"
},
target: {
horizontal: "right",
vertical: "center",
},
};
this.objLanguage = "Object-oriented programming (OOP) is a programming language model organized around objects rather than 'actions' and data rather than logic.";
this.widthObj = "35%";
this.positionObj = {
stem: {
horizontal: "right",
vertical: "center"
},
target: {
horizontal: "left",
vertical: "center",
},
};
}
}
cssClass string
Sets the root CSS class for Tooltip for the customization.
Default Value
- null
Example
<div style="width:600px; margin: 0 auto;">
JavaScript(JS) is a high-level, dynamic, untyped, and interpreted programming language.It has been standardized in the
<a>
<ej-tooltip [content]="content" cssClass="cssClass" [animation]="animation">
<u> ECMAScript </u>
</ej-tooltip>
</a>
language specification.Alongside HTML and CSS, it is one of the three essential technologies of <a> <ej-tooltip id="www" [content]="www" [width]="widthWWW" [position]="position"><u>World Wide Web</u></ej-tooltip></a> content production;
the majority of websites employ it and it is supported by all modern Web browsers without plug-ins. JS is prototype-based
with first-class functions and supporting <a> <ej-tooltip id="obj" [content]="objLanguage" [width]="widthObj" [position]="positionObj"><u>object-oriented</u></ej-tooltip></a>, imperative, and functional programming styles.
</div>
import { Component } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html'
})
export class DefaultComponent {
content: string;
width: string;
www: string;
widthWWW: string;
position: Object;
objLanguage: string;
widthObj: string;
positionObj: Object;
animation: Object;
constructor() {
this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standardized by ECMA International in ECMA-262 and ISO/IEC 16262.';
this.width = '270px';
this.www = "The World Wide Web (WWW) is an information space where documents and other web resources are identified by URLs, interlinked by hypertext links, and can be accessed via the Internet.";
this.widthWWW = "40%";
this.position = {
stem: {
horizontal: "left",
vertical: "center"
},
target: {
horizontal: "right",
vertical: "center",
},
};
this.objLanguage = "Object-oriented programming (OOP) is a programming language model organized around objects rather than 'actions' and data rather than logic.";
this.widthObj = "35%";
this.positionObj = {
stem: {
horizontal: "right",
vertical: "center"
},
target: {
horizontal: "left",
vertical: "center",
},
};
this.animation = { effect : "slide", speed : 1000};
}
}
The css must be placed in stylesheet.
<style>
.cssClass{
border: 10px solid grey;
}
</style>
enabled boolean
Enables or disables the Tooltip.
Default Value
- true
Example
<div style="width:600px; margin: 0 auto;">
JavaScript(JS) is a high-level, dynamic, untyped, and interpreted programming language.It has been standardized in the
<a>
<ej-tooltip [content]="content" [enabled]=true [animation]="animation">
<u> ECMAScript </u>
</ej-tooltip>
</a>
language specification.Alongside HTML and CSS, it is one of the three essential technologies of <a> <ej-tooltip id="www" [content]="www" [width]="widthWWW" [position]="position"><u>World Wide Web</u></ej-tooltip></a> content production;
the majority of websites employ it and it is supported by all modern Web browsers without plug-ins. JS is prototype-based
with first-class functions and supporting <a> <ej-tooltip id="obj" [content]="objLanguage" [width]="widthObj" [position]="positionObj"><u>object-oriented</u></ej-tooltip></a>, imperative, and functional programming styles.
</div>
import { Component } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html'
})
export class DefaultComponent {
content: string;
width: string;
www: string;
widthWWW: string;
position: Object;
objLanguage: string;
widthObj: string;
positionObj: Object;
animation: Object;
constructor() {
this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standardized by ECMA International in ECMA-262 and ISO/IEC 16262.';
this.width = '270px';
this.www = "The World Wide Web (WWW) is an information space where documents and other web resources are identified by URLs, interlinked by hypertext links, and can be accessed via the Internet.";
this.widthWWW = "40%";
this.position = {
stem: {
horizontal: "left",
vertical: "center"
},
target: {
horizontal: "right",
vertical: "center",
},
};
this.objLanguage = "Object-oriented programming (OOP) is a programming language model organized around objects rather than 'actions' and data rather than logic.";
this.widthObj = "35%";
this.positionObj = {
stem: {
horizontal: "right",
vertical: "center"
},
target: {
horizontal: "left",
vertical: "center",
},
};
this.animation = { effect : "slide", speed : 1000};
}
}
enableRTL boolean
Sets the Tooltip direction from right to left.
Default Value
- false
Example
<div style="width:600px; margin: 0 auto;">
JavaScript(JS) is a high-level, dynamic, untyped, and interpreted programming language.It has been standardized in the
<a>
<ej-tooltip [content]="content" [enableRTL]=true [animation]="animation">
<u> ECMAScript </u>
</ej-tooltip>
</a>
language specification.Alongside HTML and CSS, it is one of the three essential technologies of <a> <ej-tooltip id="www" [content]="www" [width]="widthWWW" [position]="position"><u>World Wide Web</u></ej-tooltip></a> content production;
the majority of websites employ it and it is supported by all modern Web browsers without plug-ins. JS is prototype-based
with first-class functions and supporting <a> <ej-tooltip id="obj" [content]="objLanguage" [width]="widthObj" [position]="positionObj"><u>object-oriented</u></ej-tooltip></a>, imperative, and functional programming styles.
</div>
import { Component } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html'
})
export class DefaultComponent {
content: string;
width: string;
www: string;
widthWWW: string;
position: Object;
objLanguage: string;
widthObj: string;
positionObj: Object;
animation: Object;
constructor() {
this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standardized by ECMA International in ECMA-262 and ISO/IEC 16262.';
this.width = '270px';
this.www = "The World Wide Web (WWW) is an information space where documents and other web resources are identified by URLs, interlinked by hypertext links, and can be accessed via the Internet.";
this.widthWWW = "40%";
this.position = {
stem: {
horizontal: "left",
vertical: "center"
},
target: {
horizontal: "right",
vertical: "center",
},
};
this.objLanguage = "Object-oriented programming (OOP) is a programming language model organized around objects rather than 'actions' and data rather than logic.";
this.widthObj = "35%";
this.positionObj = {
stem: {
horizontal: "right",
vertical: "center"
},
target: {
horizontal: "left",
vertical: "center",
},
};
this.animation = { effect : "slide", speed : 1000};
}
}
height string|number
Defines the height of the Tooltip popup.
Default Value
- auto
Example
<div style="width:600px; margin: 0 auto;">
JavaScript(JS) is a high-level, dynamic, untyped, and interpreted programming language.It has been standardized in the
<a>
<ej-tooltip [content]="content" height="50px"[animation]="animation">
<u> ECMAScript </u>
</ej-tooltip>
</a>
language specification.Alongside HTML and CSS, it is one of the three essential technologies of <a> <ej-tooltip id="www" [content]="www" [width]="widthWWW" [position]="position"><u>World Wide Web</u></ej-tooltip></a> content production;
the majority of websites employ it and it is supported by all modern Web browsers without plug-ins. JS is prototype-based
with first-class functions and supporting <a> <ej-tooltip id="obj" [content]="objLanguage" [width]="widthObj" [position]="positionObj"><u>object-oriented</u></ej-tooltip></a>, imperative, and functional programming styles.
</div>
import { Component } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html'
})
export class DefaultComponent {
content: string;
width: string;
www: string;
widthWWW: string;
position: Object;
objLanguage: string;
widthObj: string;
positionObj: Object;
animation: Object;
constructor() {
this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standardized by ECMA International in ECMA-262 and ISO/IEC 16262.';
this.width = '270px';
this.www = "The World Wide Web (WWW) is an information space where documents and other web resources are identified by URLs, interlinked by hypertext links, and can be accessed via the Internet.";
this.widthWWW = "40%";
this.position = {
stem: {
horizontal: "left",
vertical: "center"
},
target: {
horizontal: "right",
vertical: "center",
},
};
this.objLanguage = "Object-oriented programming (OOP) is a programming language model organized around objects rather than 'actions' and data rather than logic.";
this.widthObj = "35%";
this.positionObj = {
stem: {
horizontal: "right",
vertical: "center"
},
target: {
horizontal: "left",
vertical: "center",
},
};
this.animation = { effect : "slide", speed : 1000};
}
}
isBalloon boolean
Enables the arrow in Tooltip.
Default Value
- true
Example
<div style="width:600px; margin: 0 auto;">
JavaScript(JS) is a high-level, dynamic, untyped, and interpreted programming language.It has been standardized in the
<a>
<ej-tooltip [content]="content" [isBalloon]=false>
<u> ECMAScript </u>
</ej-tooltip>
</a>
language specification.Alongside HTML and CSS, it is one of the three essential technologies of <a> <ej-tooltip id="www" [content]="www" [width]="widthWWW" [position]="position"><u>World Wide Web</u></ej-tooltip></a> content production;
the majority of websites employ it and it is supported by all modern Web browsers without plug-ins. JS is prototype-based
with first-class functions and supporting <a> <ej-tooltip id="obj" [content]="objLanguage" [width]="widthObj" [position]="positionObj"><u>object-oriented</u></ej-tooltip></a>, imperative, and functional programming styles.
</div>
import { Component } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html'
})
export class DefaultComponent {
content: string;
width: string;
www: string;
widthWWW: string;
position: Object;
objLanguage: string;
widthObj: string;
positionObj: Object;
constructor() {
this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standardized by ECMA International in ECMA-262 and ISO/IEC 16262.';
this.width = '270px';
this.www = "The World Wide Web (WWW) is an information space where documents and other web resources are identified by URLs, interlinked by hypertext links, and can be accessed via the Internet.";
this.widthWWW = "40%";
this.position = {
stem: {
horizontal: "left",
vertical: "center"
},
target: {
horizontal: "right",
vertical: "center",
},
};
this.objLanguage = "Object-oriented programming (OOP) is a programming language model organized around objects rather than 'actions' and data rather than logic.";
this.widthObj = "35%";
this.positionObj = {
stem: {
horizontal: "right",
vertical: "center"
},
target: {
horizontal: "left",
vertical: "center",
},
};
}
}
position object
defines various attributes of the Tooltip position
position.target object
Sets the Tooltip position against target.
position.target.horizontal string|number
Sets the Tooltip position against target based on horizontal(x) value.
Default Value
- center
position.target.vertical string|number
Sets the Tooltip position against target based on vertical(y) value.
Default Value
- top
position.stem object
Sets the arrow position again popup.
position.stem.horizontal string
Sets the arrow position again popup based on horizontal(x) value
Default Value
- center
position.stem.vertical string
Sets the arrow position again popup based on vertical(y) value
Default Value
- bottom
showRoundedCorner boolean
Enables or disables rounded corner.
Default Value
- false
Example
<div style="width:600px; margin: 0 auto;">
JavaScript(JS) is a high-level, dynamic, untyped, and interpreted programming language.It has been standardized in the
<a>
<ej-tooltip [content]="content" [showRoundedCorner]=true>
<u> ECMAScript </u>
</ej-tooltip>
</a>
language specification.Alongside HTML and CSS, it is one of the three essential technologies of <a> <ej-tooltip id="www" [content]="www" [width]="widthWWW" [position]="position"><u>World Wide Web</u></ej-tooltip></a> content production;
the majority of websites employ it and it is supported by all modern Web browsers without plug-ins. JS is prototype-based
with first-class functions and supporting <a> <ej-tooltip id="obj" [content]="objLanguage" [width]="widthObj" [position]="positionObj"><u>object-oriented</u></ej-tooltip></a>, imperative, and functional programming styles.
</div>
import { Component } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html'
})
export class DefaultComponent {
content: string;
width: string;
www: string;
widthWWW: string;
position: Object;
objLanguage: string;
widthObj: string;
positionObj: Object;
constructor() {
this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standardized by ECMA International in ECMA-262 and ISO/IEC 16262.';
this.width = '270px';
this.www = "The World Wide Web (WWW) is an information space where documents and other web resources are identified by URLs, interlinked by hypertext links, and can be accessed via the Internet.";
this.widthWWW = "40%";
this.position = {
stem: {
horizontal: "left",
vertical: "center"
},
target: {
horizontal: "right",
vertical: "center",
},
};
this.objLanguage = "Object-oriented programming (OOP) is a programming language model organized around objects rather than 'actions' and data rather than logic.";
this.widthObj = "35%";
this.positionObj = {
stem: {
horizontal: "right",
vertical: "center"
},
target: {
horizontal: "left",
vertical: "center",
},
};
}
}
showShadow boolean
Enables or disables shadow effect.
Default Value
- false
Example
<div style="width:600px; margin: 0 auto;">
JavaScript(JS) is a high-level, dynamic, untyped, and interpreted programming language.It has been standardized in the
<a>
<ej-tooltip [content]="content" [showShadow]=true>
<u> ECMAScript </u>
</ej-tooltip>
</a>
language specification.Alongside HTML and CSS, it is one of the three essential technologies of <a> <ej-tooltip id="www" [content]="www" [width]="widthWWW" [position]="position"><u>World Wide Web</u></ej-tooltip></a> content production;
the majority of websites employ it and it is supported by all modern Web browsers without plug-ins. JS is prototype-based
with first-class functions and supporting <a> <ej-tooltip id="obj" [content]="objLanguage" [width]="widthObj" [position]="positionObj"><u>object-oriented</u></ej-tooltip></a>, imperative, and functional programming styles.
</div>
import { Component } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html'
})
export class DefaultComponent {
content: string;
width: string;
www: string;
widthWWW: string;
position: Object;
objLanguage: string;
widthObj: string;
positionObj: Object;
constructor() {
this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standardized by ECMA International in ECMA-262 and ISO/IEC 16262.';
this.width = '270px';
this.www = "The World Wide Web (WWW) is an information space where documents and other web resources are identified by URLs, interlinked by hypertext links, and can be accessed via the Internet.";
this.widthWWW = "40%";
this.position = {
stem: {
horizontal: "left",
vertical: "center"
},
target: {
horizontal: "right",
vertical: "center",
},
};
this.objLanguage = "Object-oriented programming (OOP) is a programming language model organized around objects rather than 'actions' and data rather than logic.";
this.widthObj = "35%";
this.positionObj = {
stem: {
horizontal: "right",
vertical: "center"
},
target: {
horizontal: "left",
vertical: "center",
},
};
}
}
target string
Specified a selector for elements, within the container.
Default Value
- null
Example
<div style="width:600px; margin: 0 auto;">
JavaScript(JS) is a high-level, dynamic, untyped, and interpreted programming language.It has been standardized in the
<a>
<ej-tooltip [target]=".e-info">
<a href="#" class="e-info" title="ECMAScript"> ECMAScript </a>
</ej-tooltip>
</a>
language specification.Alongside HTML and CSS, it is one of the three essential technologies of <a> <ej-tooltip id="www" [content]="www" [width]="widthWWW" [position]="position"><u>World Wide Web</u></ej-tooltip></a> content production;
the majority of websites employ it and it is supported by all modern Web browsers without plug-ins. JS is prototype-based
with first-class functions and supporting <a> <ej-tooltip id="obj" [content]="objLanguage" [width]="widthObj" [position]="positionObj"><u>object-oriented</u></ej-tooltip></a>, imperative, and functional programming styles.
</div>
import { Component } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html'
})
export class DefaultComponent {
content: string;
width: string;
www: string;
widthWWW: string;
position: Object;
objLanguage: string;
widthObj: string;
positionObj: Object;
constructor() {
this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standardized by ECMA International in ECMA-262 and ISO/IEC 16262.';
this.width = '270px';
this.www = "The World Wide Web (WWW) is an information space where documents and other web resources are identified by URLs, interlinked by hypertext links, and can be accessed via the Internet.";
this.widthWWW = "40%";
this.position = {
stem: {
horizontal: "left",
vertical: "center"
},
target: {
horizontal: "right",
vertical: "center",
},
};
this.objLanguage = "Object-oriented programming (OOP) is a programming language model organized around objects rather than 'actions' and data rather than logic.";
this.widthObj = "35%";
this.positionObj = {
stem: {
horizontal: "right",
vertical: "center"
},
target: {
horizontal: "left",
vertical: "center",
},
};
}
}
tip object
defines Tooltip size and gap between tooltip against the target element.
tip.size object
Sets the Tooltip size.
tip.size.width number
Sets the Tooltip width.
Default Value
- 20
tip.size.height number
Sets the Tooltip height.
Default Value
- 10
tip.adjust object
Sets gap between tooltip against the target element.
tip.adjust.xValue number
Sets horizontal gap between Tooltip and target element.
Default Value
- 0
tip.adjust.yValue number
Sets vertical gap between Tooltip and target element.
Default Value
- 0
title string
The title text to be displayed in the Tooltip header.
Default Value
- null
Example
<div style="width:600px; margin: 0 auto;">
JavaScript(JS) is a high-level, dynamic, untyped, and interpreted programming language.It has been standardized in the
<a>
<ej-tooltip [content]="content" title="Header">
<u> ECMAScript </u>
</ej-tooltip>
</a>
language specification.Alongside HTML and CSS, it is one of the three essential technologies of <a> <ej-tooltip id="www" [content]="www" [width]="widthWWW" [position]="position"><u>World Wide Web</u></ej-tooltip></a> content production;
the majority of websites employ it and it is supported by all modern Web browsers without plug-ins. JS is prototype-based
with first-class functions and supporting <a> <ej-tooltip id="obj" [content]="objLanguage" [width]="widthObj" [position]="positionObj"><u>object-oriented</u></ej-tooltip></a>, imperative, and functional programming styles.
</div>
import { Component } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html'
})
export class DefaultComponent {
content: string;
width: string;
www: string;
widthWWW: string;
position: Object;
objLanguage: string;
widthObj: string;
positionObj: Object;
constructor() {
this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standardized by ECMA International in ECMA-262 and ISO/IEC 16262.';
this.width = '270px';
this.www = "The World Wide Web (WWW) is an information space where documents and other web resources are identified by URLs, interlinked by hypertext links, and can be accessed via the Internet.";
this.widthWWW = "40%";
this.position = {
stem: {
horizontal: "left",
vertical: "center"
},
target: {
horizontal: "right",
vertical: "center",
},
};
this.objLanguage = "Object-oriented programming (OOP) is a programming language model organized around objects rather than 'actions' and data rather than logic.";
this.widthObj = "35%";
this.positionObj = {
stem: {
horizontal: "right",
vertical: "center"
},
target: {
horizontal: "left",
vertical: "center",
},
};
}
}
trigger enum
Specified the event action to show case the Tooltip.
Default Value
- ej.Tooltip.Trigger.Hover
Name | Description |
---|---|
Click | The Tooltip to be shown when the target element is clicked. |
Hover | Enables the Tooltip when hover on the target element. |
Focus | Enables the Tooltip when focus is set to target element. |
The below example will cause the Tooltip to be shown when the target element is clicked.
Example
<div style="width:600px; margin: 0 auto;">
JavaScript(JS) is a high-level, dynamic, untyped, and interpreted programming language.It has been standardized in the
<a>
<ej-tooltip [content]="content" trigger="click">
<u> ECMAScript </u>
</ej-tooltip>
</a>
language specification.Alongside HTML and CSS, it is one of the three essential technologies of <a> <ej-tooltip id="www" [content]="www" [width]="widthWWW" [position]="position"><u>World Wide Web</u></ej-tooltip></a> content production;
the majority of websites employ it and it is supported by all modern Web browsers without plug-ins. JS is prototype-based
with first-class functions and supporting <a> <ej-tooltip id="obj" [content]="objLanguage" [width]="widthObj" [position]="positionObj"><u>object-oriented</u></ej-tooltip></a>, imperative, and functional programming styles.
</div>
import { Component } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html'
})
export class DefaultComponent {
content: string;
width: string;
www: string;
widthWWW: string;
position: Object;
objLanguage: string;
widthObj: string;
positionObj: Object;
constructor() {
this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standardized by ECMA International in ECMA-262 and ISO/IEC 16262.';
this.width = '270px';
this.www = "The World Wide Web (WWW) is an information space where documents and other web resources are identified by URLs, interlinked by hypertext links, and can be accessed via the Internet.";
this.widthWWW = "40%";
this.position = {
stem: {
horizontal: "left",
vertical: "center"
},
target: {
horizontal: "right",
vertical: "center",
},
};
this.objLanguage = "Object-oriented programming (OOP) is a programming language model organized around objects rather than 'actions' and data rather than logic.";
this.widthObj = "35%";
this.positionObj = {
stem: {
horizontal: "right",
vertical: "center"
},
target: {
horizontal: "left",
vertical: "center",
},
};
}
}
The below example will cause the Tooltip to be shown when the target element is focused:
Example
width string|number
Defines the width of the Tooltip popup.
Default Value
- auto
Example
<div style="width:600px; margin: 0 auto;">
JavaScript(JS) is a high-level, dynamic, untyped, and interpreted programming language.It has been standardized in the
<a>
<ej-tooltip [content]="content" >
<u> ECMAScript </u>
</ej-tooltip>
</a>
language specification.Alongside HTML and CSS, it is one of the three essential technologies of <a> <ej-tooltip id="www" [content]="www" [width]="widthWWW" [position]="position"><u>World Wide Web</u></ej-tooltip></a> content production;
the majority of websites employ it and it is supported by all modern Web browsers without plug-ins. JS is prototype-based
with first-class functions and supporting <a> <ej-tooltip id="obj" [content]="objLanguage" [width]="widthObj" [position]="positionObj"><u>object-oriented</u></ej-tooltip></a>, imperative, and functional programming styles.
</div>
import { Component } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html'
})
export class DefaultComponent {
content: string;
width: string;
www: string;
widthWWW: string;
position: Object;
objLanguage: string;
widthObj: string;
positionObj: Object;
constructor() {
this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standardized by ECMA International in ECMA-262 and ISO/IEC 16262.';
this.width = '270px';
this.www = "The World Wide Web (WWW) is an information space where documents and other web resources are identified by URLs, interlinked by hypertext links, and can be accessed via the Internet.";
this.widthWWW = "40%";
this.position = {
stem: {
horizontal: "left",
vertical: "center"
},
target: {
horizontal: "right",
vertical: "center",
},
};
this.objLanguage = "Object-oriented programming (OOP) is a programming language model organized around objects rather than 'actions' and data rather than logic.";
this.widthObj = "35%";
this.positionObj = {
stem: {
horizontal: "right",
vertical: "center"
},
target: {
horizontal: "left",
vertical: "center",
},
};
}
}
Methods
destroy()
Destroys the Tooltip control.
Returns:
Void
Example
DESTROY
disable()
Disables the Tooltip control.
Returns:
Void
Example
<div style="width:600px; margin: 0 auto;">
JavaScript(JS) is a high-level, dynamic, untyped, and interpreted programming language.It has been standardized in the
<a>
<ej-tooltip [content]="content" [width]="width">
<u> ECMAScript </u>
</ej-tooltip>
</a>
language specification.Alongside HTML and CSS, it is one of the three essential technologies of <a> <ej-tooltip id="www" [content]="www" [width]="widthWWW" [position]="position"><u>World Wide Web</u></ej-tooltip></a> content production;
the majority of websites employ it and it is supported by all modern Web browsers without plug-ins. JS is prototype-based
with first-class functions and supporting <a> <ej-tooltip id="obj" [content]="objLanguage" [width]="widthObj" [position]="positionObj"><u>object-oriented</u></ej-tooltip></a>, imperative, and functional programming styles.
</div>
<button type="button" (click)="OnClick()" style="margin-left: 35%;">Disable</button>
import { Component } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html'
})
export class DefaultComponent {
content: string;
width: string;
www: string;
widthWWW: string;
position: Object;
objLanguage: string;
widthObj: string;
positionObj: Object;
constructor() {
this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standardized by ECMA International in ECMA-262 and ISO/IEC 16262.';
this.width = '270px';
this.www = "The World Wide Web (WWW) is an information space where documents and other web resources are identified by URLs, interlinked by hypertext links, and can be accessed via the Internet.";
this.widthWWW = "40%";
this.position = {
stem: {
horizontal: "left",
vertical: "center"
},
target: {
horizontal: "right",
vertical: "center",
},
};
this.objLanguage = "Object-oriented programming (OOP) is a programming language model organized around objects rather than 'actions' and data rather than logic.";
this.widthObj = "35%";
this.positionObj = {
stem: {
horizontal: "right",
vertical: "center"
},
target: {
horizontal: "left",
vertical: "center",
},
};
}
OnClick(args){
var obj = $("#www").data("ejTooltip");
obj.disable();
}
}
<div style="width:600px; margin: 0 auto;">
JavaScript(JS) is a high-level, dynamic, untyped, and interpreted programming language.It has been standardized in the
<a>
<ej-tooltip [content]="content" [width]="width">
<u> ECMAScript </u>
</ej-tooltip>
</a>
language specification.Alongside HTML and CSS, it is one of the three essential technologies of <a> <ej-tooltip id="www" [content]="www" [width]="widthWWW" [position]="position"><u>World Wide Web</u></ej-tooltip></a> content production;
the majority of websites employ it and it is supported by all modern Web browsers without plug-ins. JS is prototype-based
with first-class functions and supporting <a> <ej-tooltip id="obj" [content]="objLanguage" [width]="widthObj" [position]="positionObj"><u>object-oriented</u></ej-tooltip></a>, imperative, and functional programming styles.
</div>
<button type="button" (click)="OnClick()" style="margin-left: 35%;">Disable</button>
import { Component } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html'
})
export class DefaultComponent {
content: string;
width: string;
www: string;
widthWWW: string;
position: Object;
objLanguage: string;
widthObj: string;
positionObj: Object;
constructor() {
this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standardized by ECMA International in ECMA-262 and ISO/IEC 16262.';
this.width = '270px';
this.www = "The World Wide Web (WWW) is an information space where documents and other web resources are identified by URLs, interlinked by hypertext links, and can be accessed via the Internet.";
this.widthWWW = "40%";
this.position = {
stem: {
horizontal: "left",
vertical: "center"
},
target: {
horizontal: "right",
vertical: "center",
},
};
this.objLanguage = "Object-oriented programming (OOP) is a programming language model organized around objects rather than 'actions' and data rather than logic.";
this.widthObj = "35%";
this.positionObj = {
stem: {
horizontal: "right",
vertical: "center"
},
target: {
horizontal: "left",
vertical: "center",
},
};
}
OnClick(args){
$("#www").ejTooltip("disable");
}
}
enable()
Enables the Tooltip control.
Returns:
Void
Example
<div style="width:600px; margin: 0 auto;">
JavaScript(JS) is a high-level, dynamic, untyped, and interpreted programming language.It has been standardized in the
<a>
<ej-tooltip [content]="content" [width]="width">
<u> ECMAScript </u>
</ej-tooltip>
</a>
language specification.Alongside HTML and CSS, it is one of the three essential technologies of <a> <ej-tooltip id="www" [content]="www" [width]="widthWWW" [position]="position"><u>World Wide Web</u></ej-tooltip></a> content production;
the majority of websites employ it and it is supported by all modern Web browsers without plug-ins. JS is prototype-based
with first-class functions and supporting <a> <ej-tooltip id="obj" [content]="objLanguage" [width]="widthObj" [position]="positionObj"><u>object-oriented</u></ej-tooltip></a>, imperative, and functional programming styles.
</div>
<button type="button" (click)="OnClick()" style="margin-left: 35%;">Enable</button>
import { Component } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html'
})
export class DefaultComponent {
content: string;
width: string;
www: string;
widthWWW: string;
position: Object;
objLanguage: string;
widthObj: string;
positionObj: Object;
constructor() {
this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standardized by ECMA International in ECMA-262 and ISO/IEC 16262.';
this.width = '270px';
this.www = "The World Wide Web (WWW) is an information space where documents and other web resources are identified by URLs, interlinked by hypertext links, and can be accessed via the Internet.";
this.widthWWW = "40%";
this.position = {
stem: {
horizontal: "left",
vertical: "center"
},
target: {
horizontal: "right",
vertical: "center",
},
};
this.objLanguage = "Object-oriented programming (OOP) is a programming language model organized around objects rather than 'actions' and data rather than logic.";
this.widthObj = "35%";
this.positionObj = {
stem: {
horizontal: "right",
vertical: "center"
},
target: {
horizontal: "left",
vertical: "center",
},
};
}
OnClick(args){
var obj = $("#www").data("ejTooltip");
obj.enable();
}
}
<div style="width:600px; margin: 0 auto;">
JavaScript(JS) is a high-level, dynamic, untyped, and interpreted programming language.It has been standardized in the
<a>
<ej-tooltip [content]="content" [width]="width">
<u> ECMAScript </u>
</ej-tooltip>
</a>
language specification.Alongside HTML and CSS, it is one of the three essential technologies of <a> <ej-tooltip id="www" [content]="www" [width]="widthWWW" [position]="position"><u>World Wide Web</u></ej-tooltip></a> content production;
the majority of websites employ it and it is supported by all modern Web browsers without plug-ins. JS is prototype-based
with first-class functions and supporting <a> <ej-tooltip id="obj" [content]="objLanguage" [width]="widthObj" [position]="positionObj"><u>object-oriented</u></ej-tooltip></a>, imperative, and functional programming styles.
</div>
<button type="button" (click)="OnClick()" style="margin-left: 35%;">enable</button>
import { Component } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html'
})
export class DefaultComponent {
content: string;
width: string;
www: string;
widthWWW: string;
position: Object;
objLanguage: string;
widthObj: string;
positionObj: Object;
constructor() {
this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standardized by ECMA International in ECMA-262 and ISO/IEC 16262.';
this.width = '270px';
this.www = "The World Wide Web (WWW) is an information space where documents and other web resources are identified by URLs, interlinked by hypertext links, and can be accessed via the Internet.";
this.widthWWW = "40%";
this.position = {
stem: {
horizontal: "left",
vertical: "center"
},
target: {
horizontal: "right",
vertical: "center",
},
};
this.objLanguage = "Object-oriented programming (OOP) is a programming language model organized around objects rather than 'actions' and data rather than logic.";
this.widthObj = "35%";
this.positionObj = {
stem: {
horizontal: "right",
vertical: "center"
},
target: {
horizontal: "left",
vertical: "center",
},
};
}
OnClick(args){
$("#www").ejTooltip("enable");
}
}
hide([effect],[func])
Hide the Tooltip popup.
Name | Type | Description |
---|---|---|
effect | string | optional Determines the type of effect that takes place when hiding the tooltip. |
func | function | optional custom effect takes place when hiding the tooltip. |
Returns:
Void
Example
<div style="width:600px; margin: 0 auto;">
JavaScript(JS) is a high-level, dynamic, untyped, and interpreted programming language.It has been standardized in the
<a>
<ej-tooltip [content]="content" [width]="width">
<u> ECMAScript </u>
</ej-tooltip>
</a>
language specification.Alongside HTML and CSS, it is one of the three essential technologies of <a> <ej-tooltip id="www" [content]="www" [width]="widthWWW" [position]="position"><u>World Wide Web</u></ej-tooltip></a> content production;
the majority of websites employ it and it is supported by all modern Web browsers without plug-ins. JS is prototype-based
with first-class functions and supporting <a> <ej-tooltip id="obj" [content]="objLanguage" [width]="widthObj" [position]="positionObj"><u>object-oriented</u></ej-tooltip></a>, imperative, and functional programming styles.
</div>
<button type="button" (click)="OnClick()" style="margin-left: 35%;">Hide</button>
import { Component } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html'
})
export class DefaultComponent {
content: string;
width: string;
www: string;
widthWWW: string;
position: Object;
objLanguage: string;
widthObj: string;
positionObj: Object;
constructor() {
this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standardized by ECMA International in ECMA-262 and ISO/IEC 16262.';
this.width = '270px';
this.www = "The World Wide Web (WWW) is an information space where documents and other web resources are identified by URLs, interlinked by hypertext links, and can be accessed via the Internet.";
this.widthWWW = "40%";
this.position = {
stem: {
horizontal: "left",
vertical: "center"
},
target: {
horizontal: "right",
vertical: "center",
},
};
this.objLanguage = "Object-oriented programming (OOP) is a programming language model organized around objects rather than 'actions' and data rather than logic.";
this.widthObj = "35%";
this.positionObj = {
stem: {
horizontal: "right",
vertical: "center"
},
target: {
horizontal: "left",
vertical: "center",
},
};
}
OnClick(args){
var obj = $("#www").data("ejTooltip");
obj.hide();
}
}
<div style="width:600px; margin: 0 auto;">
JavaScript(JS) is a high-level, dynamic, untyped, and interpreted programming language.It has been standardized in the
<a>
<ej-tooltip [content]="content" [width]="width">
<u> ECMAScript </u>
</ej-tooltip>
</a>
language specification.Alongside HTML and CSS, it is one of the three essential technologies of <a> <ej-tooltip id="www" [content]="www" [width]="widthWWW" [position]="position"><u>World Wide Web</u></ej-tooltip></a> content production;
the majority of websites employ it and it is supported by all modern Web browsers without plug-ins. JS is prototype-based
with first-class functions and supporting <a> <ej-tooltip id="obj" [content]="objLanguage" [width]="widthObj" [position]="positionObj"><u>object-oriented</u></ej-tooltip></a>, imperative, and functional programming styles.
</div>
<button type="button" (click)="OnClick()" style="margin-left: 35%;">Hide</button>
import { Component } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html'
})
export class DefaultComponent {
content: string;
width: string;
www: string;
widthWWW: string;
position: Object;
objLanguage: string;
widthObj: string;
positionObj: Object;
constructor() {
this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standardized by ECMA International in ECMA-262 and ISO/IEC 16262.';
this.width = '270px';
this.www = "The World Wide Web (WWW) is an information space where documents and other web resources are identified by URLs, interlinked by hypertext links, and can be accessed via the Internet.";
this.widthWWW = "40%";
this.position = {
stem: {
horizontal: "left",
vertical: "center"
},
target: {
horizontal: "right",
vertical: "center",
},
};
this.objLanguage = "Object-oriented programming (OOP) is a programming language model organized around objects rather than 'actions' and data rather than logic.";
this.widthObj = "35%";
this.positionObj = {
stem: {
horizontal: "right",
vertical: "center"
},
target: {
horizontal: "left",
vertical: "center",
},
};
}
OnClick(args){
$("#www").ejTooltip("hide");
}
}
show([target],[effect],[func])
Shows the Tooltip popup for the given target element with the specified effect.
Name | Type | Description |
---|---|---|
effect | string | optional Determines the type of effect that takes place when showing the tooltip. |
func | function | optional custom effect takes place when showing the tooltip. |
target | jQuery | optional Tooltip will be shown for the given element |
Returns:
Void
Example
<div style="width:600px; margin: 0 auto;">
JavaScript(JS) is a high-level, dynamic, untyped, and interpreted programming language.It has been standardized in the
<a>
<ej-tooltip [content]="content" [width]="width">
<u> ECMAScript </u>
</ej-tooltip>
</a>
language specification.Alongside HTML and CSS, it is one of the three essential technologies of <a> <ej-tooltip id="www" [content]="www" [width]="widthWWW" [position]="position"><u>World Wide Web</u></ej-tooltip></a> content production;
the majority of websites employ it and it is supported by all modern Web browsers without plug-ins. JS is prototype-based
with first-class functions and supporting <a> <ej-tooltip id="obj" [content]="objLanguage" [width]="widthObj" [position]="positionObj"><u>object-oriented</u></ej-tooltip></a>, imperative, and functional programming styles.
</div>
<button type="button" (click)="OnClick()" style="margin-left: 35%;">show</button>
import { Component } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html'
})
export class DefaultComponent {
content: string;
width: string;
www: string;
widthWWW: string;
position: Object;
objLanguage: string;
widthObj: string;
positionObj: Object;
constructor() {
this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standardized by ECMA International in ECMA-262 and ISO/IEC 16262.';
this.width = '270px';
this.www = "The World Wide Web (WWW) is an information space where documents and other web resources are identified by URLs, interlinked by hypertext links, and can be accessed via the Internet.";
this.widthWWW = "40%";
this.position = {
stem: {
horizontal: "left",
vertical: "center"
},
target: {
horizontal: "right",
vertical: "center",
},
};
this.objLanguage = "Object-oriented programming (OOP) is a programming language model organized around objects rather than 'actions' and data rather than logic.";
this.widthObj = "35%";
this.positionObj = {
stem: {
horizontal: "right",
vertical: "center"
},
target: {
horizontal: "left",
vertical: "center",
},
};
}
OnClick(args){
var obj = $("#www").data("ejTooltip");
obj.show();
}
}
<div style="width:600px; margin: 0 auto;">
JavaScript(JS) is a high-level, dynamic, untyped, and interpreted programming language.It has been standardized in the
<a>
<ej-tooltip [content]="content" [width]="width">
<u> ECMAScript </u>
</ej-tooltip>
</a>
language specification.Alongside HTML and CSS, it is one of the three essential technologies of <a> <ej-tooltip id="www" [content]="www" [width]="widthWWW" [position]="position"><u>World Wide Web</u></ej-tooltip></a> content production;
the majority of websites employ it and it is supported by all modern Web browsers without plug-ins. JS is prototype-based
with first-class functions and supporting <a> <ej-tooltip id="obj" [content]="objLanguage" [width]="widthObj" [position]="positionObj"><u>object-oriented</u></ej-tooltip></a>, imperative, and functional programming styles.
</div>
<button type="button" (click)="OnClick()" style="margin-left: 35%;">show</button>
import { Component } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html'
})
export class DefaultComponent {
content: string;
width: string;
www: string;
widthWWW: string;
position: Object;
objLanguage: string;
widthObj: string;
positionObj: Object;
constructor() {
this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standardized by ECMA International in ECMA-262 and ISO/IEC 16262.';
this.width = '270px';
this.www = "The World Wide Web (WWW) is an information space where documents and other web resources are identified by URLs, interlinked by hypertext links, and can be accessed via the Internet.";
this.widthWWW = "40%";
this.position = {
stem: {
horizontal: "left",
vertical: "center"
},
target: {
horizontal: "right",
vertical: "center",
},
};
this.objLanguage = "Object-oriented programming (OOP) is a programming language model organized around objects rather than 'actions' and data rather than logic.";
this.widthObj = "35%";
this.positionObj = {
stem: {
horizontal: "right",
vertical: "center"
},
target: {
horizontal: "left",
vertical: "center",
},
};
}
OnClick(args){
$("#www").ejTooltip("show");
}
}
Events
beforeClose
This event is triggered before the Tooltip widget get closed.
Name | Type | Description |
---|---|---|
cancel | boolean | if the event should be canceled; otherwise, false. |
model | object | returns the tooltip model |
type | string | returns the name of the event |
content | string | returns the Tooltip's content |
Example
<div style="width:600px; margin: 0 auto;">
JavaScript(JS) is a high-level, dynamic, untyped, and interpreted programming language.It has been standardized in the
<a>
<ej-tooltip [content]="content" (beforeClose)="beforeClose($event)">
<u> ECMAScript </u>
</ej-tooltip>
</a>
language specification.Alongside HTML and CSS, it is one of the three essential technologies of <a> <ej-tooltip id="www" [content]="www" [width]="widthWWW" [position]="position"><u>World Wide Web</u></ej-tooltip></a> content production;
the majority of websites employ it and it is supported by all modern Web browsers without plug-ins. JS is prototype-based
with first-class functions and supporting <a> <ej-tooltip id="obj" [content]="objLanguage" [width]="widthObj" [position]="positionObj"><u>object-oriented</u></ej-tooltip></a>, imperative, and functional programming styles.
</div>
import { Component } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html'
})
export class DefaultComponent {
content: string;
width: string;
www: string;
widthWWW: string;
position: Object;
objLanguage: string;
widthObj: string;
positionObj: Object;
constructor() {
this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standardized by ECMA International in ECMA-262 and ISO/IEC 16262.';
this.width = '270px';
this.www = "The World Wide Web (WWW) is an information space where documents and other web resources are identified by URLs, interlinked by hypertext links, and can be accessed via the Internet.";
this.widthWWW = "40%";
this.position = {
stem: {
horizontal: "left",
vertical: "center"
},
target: {
horizontal: "right",
vertical: "center",
},
};
this.objLanguage = "Object-oriented programming (OOP) is a programming language model organized around objects rather than 'actions' and data rather than logic.";
this.widthObj = "35%";
this.positionObj = {
stem: {
horizontal: "right",
vertical: "center"
},
target: {
horizontal: "left",
vertical: "center",
},
};
}
beforeClose(args){
}
}
beforeOpen
This event is triggered before the Tooltip widget gets open.
Name | Type | Description |
---|---|---|
cancel | boolean | if the event should be canceled; otherwise, false. |
model | object | returns the Tooltip model |
type | string | returns the name of the event |
content | string | returns the Tooltip's content |
Example
<div style="width:600px; margin: 0 auto;">
JavaScript(JS) is a high-level, dynamic, untyped, and interpreted programming language.It has been standardized in the
<a>
<ej-tooltip [content]="content" (beforeOpen)="beforeOpen($event)">
<u> ECMAScript </u>
</ej-tooltip>
</a>
language specification.Alongside HTML and CSS, it is one of the three essential technologies of <a> <ej-tooltip id="www" [content]="www" [width]="widthWWW" [position]="position"><u>World Wide Web</u></ej-tooltip></a> content production;
the majority of websites employ it and it is supported by all modern Web browsers without plug-ins. JS is prototype-based
with first-class functions and supporting <a> <ej-tooltip id="obj" [content]="objLanguage" [width]="widthObj" [position]="positionObj"><u>object-oriented</u></ej-tooltip></a>, imperative, and functional programming styles.
</div>
import { Component } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html'
})
export class DefaultComponent {
content: string;
width: string;
www: string;
widthWWW: string;
position: Object;
objLanguage: string;
widthObj: string;
positionObj: Object;
constructor() {
this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standardized by ECMA International in ECMA-262 and ISO/IEC 16262.';
this.width = '270px';
this.www = "The World Wide Web (WWW) is an information space where documents and other web resources are identified by URLs, interlinked by hypertext links, and can be accessed via the Internet.";
this.widthWWW = "40%";
this.position = {
stem: {
horizontal: "left",
vertical: "center"
},
target: {
horizontal: "right",
vertical: "center",
},
};
this.objLanguage = "Object-oriented programming (OOP) is a programming language model organized around objects rather than 'actions' and data rather than logic.";
this.widthObj = "35%";
this.positionObj = {
stem: {
horizontal: "right",
vertical: "center"
},
target: {
horizontal: "left",
vertical: "center",
},
};
}
beforeOpen(args){
}
}
click
Fires on clicking to the target element.
Name | Type | Description |
---|---|---|
cancel | boolean | its value is set as true,if the event should be canceled; otherwise, false. |
model | object | returns the Tooltip model |
type | string | returns the name of the event |
event | object | returns the event object |
Example
<div style="width:600px; margin: 0 auto;">
JavaScript(JS) is a high-level, dynamic, untyped, and interpreted programming language.It has been standardized in the
<a>
<ej-tooltip [content]="content" (click)="Click($event)">
<u> ECMAScript </u>
</ej-tooltip>
</a>
language specification.Alongside HTML and CSS, it is one of the three essential technologies of <a> <ej-tooltip id="www" [content]="www" [width]="widthWWW" [position]="position"><u>World Wide Web</u></ej-tooltip></a> content production;
the majority of websites employ it and it is supported by all modern Web browsers without plug-ins. JS is prototype-based
with first-class functions and supporting <a> <ej-tooltip id="obj" [content]="objLanguage" [width]="widthObj" [position]="positionObj"><u>object-oriented</u></ej-tooltip></a>, imperative, and functional programming styles.
</div>
import { Component } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html'
})
export class DefaultComponent {
content: string;
width: string;
www: string;
widthWWW: string;
position: Object;
objLanguage: string;
widthObj: string;
positionObj: Object;
constructor() {
this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standardized by ECMA International in ECMA-262 and ISO/IEC 16262.';
this.width = '270px';
this.www = "The World Wide Web (WWW) is an information space where documents and other web resources are identified by URLs, interlinked by hypertext links, and can be accessed via the Internet.";
this.widthWWW = "40%";
this.position = {
stem: {
horizontal: "left",
vertical: "center"
},
target: {
horizontal: "right",
vertical: "center",
},
};
this.objLanguage = "Object-oriented programming (OOP) is a programming language model organized around objects rather than 'actions' and data rather than logic.";
this.widthObj = "35%";
this.positionObj = {
stem: {
horizontal: "right",
vertical: "center"
},
target: {
horizontal: "left",
vertical: "center",
},
};
}
Click(args){
}
}
CLICK
close
This event is triggered after the Tooltip widget is closed.
Name | Type | Description |
---|---|---|
cancel | boolean | if the event should be canceled; otherwise, false. |
model | object | returns the Tooltip model |
type | string | returns the name of the event |
content | string | returns the Tooltip's content |
Example
<div style="width:600px; margin: 0 auto;">
JavaScript(JS) is a high-level, dynamic, untyped, and interpreted programming language.It has been standardized in the
<a>
<ej-tooltip [content]="content" (close)="Close($event)">
<u> ECMAScript </u>
</ej-tooltip>
</a>
language specification.Alongside HTML and CSS, it is one of the three essential technologies of <a> <ej-tooltip id="www" [content]="www" [width]="widthWWW" [position]="position"><u>World Wide Web</u></ej-tooltip></a> content production;
the majority of websites employ it and it is supported by all modern Web browsers without plug-ins. JS is prototype-based
with first-class functions and supporting <a> <ej-tooltip id="obj" [content]="objLanguage" [width]="widthObj" [position]="positionObj"><u>object-oriented</u></ej-tooltip></a>, imperative, and functional programming styles.
</div>
import { Component } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html'
})
export class DefaultComponent {
content: string;
width: string;
www: string;
widthWWW: string;
position: Object;
objLanguage: string;
widthObj: string;
positionObj: Object;
constructor() {
this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standardized by ECMA International in ECMA-262 and ISO/IEC 16262.';
this.width = '270px';
this.www = "The World Wide Web (WWW) is an information space where documents and other web resources are identified by URLs, interlinked by hypertext links, and can be accessed via the Internet.";
this.widthWWW = "40%";
this.position = {
stem: {
horizontal: "left",
vertical: "center"
},
target: {
horizontal: "right",
vertical: "center",
},
};
this.objLanguage = "Object-oriented programming (OOP) is a programming language model organized around objects rather than 'actions' and data rather than logic.";
this.widthObj = "35%";
this.positionObj = {
stem: {
horizontal: "right",
vertical: "center"
},
target: {
horizontal: "left",
vertical: "center",
},
};
}
Close(args){
}
}
create
This event is triggered after the Tooltip is created successfully.
Name | Type | Description |
---|---|---|
cancel | boolean | if the event should be canceled; otherwise, false. |
model | object | returns the Tooltip model |
type | string | returns the name of the event |
Example
<div style="width:600px; margin: 0 auto;">
JavaScript(JS) is a high-level, dynamic, untyped, and interpreted programming language.It has been standardized in the
<a>
<ej-tooltip [content]="content" (create)="Create($event)">
<u> ECMAScript </u>
</ej-tooltip>
</a>
language specification.Alongside HTML and CSS, it is one of the three essential technologies of <a> <ej-tooltip id="www" [content]="www" [width]="widthWWW" [position]="position"><u>World Wide Web</u></ej-tooltip></a> content production;
the majority of websites employ it and it is supported by all modern Web browsers without plug-ins. JS is prototype-based
with first-class functions and supporting <a> <ej-tooltip id="obj" [content]="objLanguage" [width]="widthObj" [position]="positionObj"><u>object-oriented</u></ej-tooltip></a>, imperative, and functional programming styles.
</div>
import { Component } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html'
})
export class DefaultComponent {
content: string;
width: string;
www: string;
widthWWW: string;
position: Object;
objLanguage: string;
widthObj: string;
positionObj: Object;
constructor() {
this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standardized by ECMA International in ECMA-262 and ISO/IEC 16262.';
this.width = '270px';
this.www = "The World Wide Web (WWW) is an information space where documents and other web resources are identified by URLs, interlinked by hypertext links, and can be accessed via the Internet.";
this.widthWWW = "40%";
this.position = {
stem: {
horizontal: "left",
vertical: "center"
},
target: {
horizontal: "right",
vertical: "center",
},
};
this.objLanguage = "Object-oriented programming (OOP) is a programming language model organized around objects rather than 'actions' and data rather than logic.";
this.widthObj = "35%";
this.positionObj = {
stem: {
horizontal: "right",
vertical: "center"
},
target: {
horizontal: "left",
vertical: "center",
},
};
}
Create(args){
}
}
destroy
This event is triggered after the Tooltip widget is destroyed successfully.
Name | Type | Description |
---|---|---|
cancel | boolean | its value is set as true,if the event should be canceled; otherwise, false. |
model | object | returns the Tooltip model |
type | string | returns the name of the event |
Example
<div style="width:600px; margin: 0 auto;">
JavaScript(JS) is a high-level, dynamic, untyped, and interpreted programming language.It has been standardized in the
<a>
<ej-tooltip [content]="content" (destroy)="destroy($event)">
<u> ECMAScript </u>
</ej-tooltip>
</a>
language specification.Alongside HTML and CSS, it is one of the three essential technologies of <a> <ej-tooltip id="www" [content]="www" [width]="widthWWW" [position]="position"><u>World Wide Web</u></ej-tooltip></a> content production;
the majority of websites employ it and it is supported by all modern Web browsers without plug-ins. JS is prototype-based
with first-class functions and supporting <a> <ej-tooltip id="obj" [content]="objLanguage" [width]="widthObj" [position]="positionObj"><u>object-oriented</u></ej-tooltip></a>, imperative, and functional programming styles.
</div>
import { Component } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html'
})
export class DefaultComponent {
content: string;
width: string;
www: string;
widthWWW: string;
position: Object;
objLanguage: string;
widthObj: string;
positionObj: Object;
constructor() {
this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standardized by ECMA International in ECMA-262 and ISO/IEC 16262.';
this.width = '270px';
this.www = "The World Wide Web (WWW) is an information space where documents and other web resources are identified by URLs, interlinked by hypertext links, and can be accessed via the Internet.";
this.widthWWW = "40%";
this.position = {
stem: {
horizontal: "left",
vertical: "center"
},
target: {
horizontal: "right",
vertical: "center",
},
};
this.objLanguage = "Object-oriented programming (OOP) is a programming language model organized around objects rather than 'actions' and data rather than logic.";
this.widthObj = "35%";
this.positionObj = {
stem: {
horizontal: "right",
vertical: "center"
},
target: {
horizontal: "left",
vertical: "center",
},
};
}
destroy(args){
}
}
hover
This event is triggered while hovering the target element, when tooltip positioning relates to target element.
Name | Type | Description |
---|---|---|
cancel | boolean | its value is set as true,if the event should be canceled; otherwise, false. |
model | object | returns the Tooltip model |
type | string | returns the name of the event |
event | object | returns the event object |
Example
<div style="width:600px; margin: 0 auto;">
JavaScript(JS) is a high-level, dynamic, untyped, and interpreted programming language.It has been standardized in the
<a>
<ej-tooltip [content]="content" (hover)="hover($event)">
<u> ECMAScript </u>
</ej-tooltip>
</a>
language specification.Alongside HTML and CSS, it is one of the three essential technologies of <a> <ej-tooltip id="www" [content]="www" [width]="widthWWW" [position]="position"><u>World Wide Web</u></ej-tooltip></a> content production;
the majority of websites employ it and it is supported by all modern Web browsers without plug-ins. JS is prototype-based
with first-class functions and supporting <a> <ej-tooltip id="obj" [content]="objLanguage" [width]="widthObj" [position]="positionObj"><u>object-oriented</u></ej-tooltip></a>, imperative, and functional programming styles.
</div>
import { Component } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html'
})
export class DefaultComponent {
content: string;
width: string;
www: string;
widthWWW: string;
position: Object;
objLanguage: string;
widthObj: string;
positionObj: Object;
constructor() {
this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standardized by ECMA International in ECMA-262 and ISO/IEC 16262.';
this.width = '270px';
this.www = "The World Wide Web (WWW) is an information space where documents and other web resources are identified by URLs, interlinked by hypertext links, and can be accessed via the Internet.";
this.widthWWW = "40%";
this.position = {
stem: {
horizontal: "left",
vertical: "center"
},
target: {
horizontal: "right",
vertical: "center",
},
};
this.objLanguage = "Object-oriented programming (OOP) is a programming language model organized around objects rather than 'actions' and data rather than logic.";
this.widthObj = "35%";
this.positionObj = {
stem: {
horizontal: "right",
vertical: "center"
},
target: {
horizontal: "left",
vertical: "center",
},
};
}
hover(args){
}
}
open
This event is triggered after the Tooltip is opened.
Name | Type | Description |
---|---|---|
cancel | boolean | if the event should be canceled; otherwise, false. |
model | object | returns the Tooltip model |
type | string | returns the name of the event |
content | string | returns the Tooltip's content |
Example
<div style="width:600px; margin: 0 auto;">
JavaScript(JS) is a high-level, dynamic, untyped, and interpreted programming language.It has been standardized in the
<a>
<ej-tooltip [content]="content" (open)="open($event)">
<u> ECMAScript </u>
</ej-tooltip>
</a>
language specification.Alongside HTML and CSS, it is one of the three essential technologies of <a> <ej-tooltip id="www" [content]="www" [width]="widthWWW" [position]="position"><u>World Wide Web</u></ej-tooltip></a> content production;
the majority of websites employ it and it is supported by all modern Web browsers without plug-ins. JS is prototype-based
with first-class functions and supporting <a> <ej-tooltip id="obj" [content]="objLanguage" [width]="widthObj" [position]="positionObj"><u>object-oriented</u></ej-tooltip></a>, imperative, and functional programming styles.
</div>
import { Component } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html'
})
export class DefaultComponent {
content: string;
width: string;
www: string;
widthWWW: string;
position: Object;
objLanguage: string;
widthObj: string;
positionObj: Object;
constructor() {
this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standardized by ECMA International in ECMA-262 and ISO/IEC 16262.';
this.width = '270px';
this.www = "The World Wide Web (WWW) is an information space where documents and other web resources are identified by URLs, interlinked by hypertext links, and can be accessed via the Internet.";
this.widthWWW = "40%";
this.position = {
stem: {
horizontal: "left",
vertical: "center"
},
target: {
horizontal: "right",
vertical: "center",
},
};
this.objLanguage = "Object-oriented programming (OOP) is a programming language model organized around objects rather than 'actions' and data rather than logic.";
this.widthObj = "35%";
this.positionObj = {
stem: {
horizontal: "right",
vertical: "center"
},
target: {
horizontal: "left",
vertical: "center",
},
};
}
open(args){
}
}
tracking
This event is triggered while hover the target element, when the tooltip positioning is relates to the mouse.
Name | Type | Description |
---|---|---|
cancel | boolean | its value is set as true,if the event should be canceled; otherwise, false. |
model | object | returns the Tooltip model |
type | string | returns the name of the event |
event | object | returns the event object |
Example
<div style="width:600px; margin: 0 auto;">
JavaScript(JS) is a high-level, dynamic, untyped, and interpreted programming language.It has been standardized in the
<a>
<ej-tooltip [content]="content" associate="mousefollow" (tracking)="tracking($event)">
<u> ECMAScript </u>
</ej-tooltip>
</a>
language specification.Alongside HTML and CSS, it is one of the three essential technologies of <a> <ej-tooltip id="www" [content]="www" [width]="widthWWW" associate="axis" [position]="position"><u>World Wide Web</u></ej-tooltip></a> content production;
the majority of websites employ it and it is supported by all modern Web browsers without plug-ins. JS is prototype-based
with first-class functions and supporting <a> <ej-tooltip id="obj" [content]="objLanguage" [width]="widthObj" [position]="positionObj"><u>object-oriented</u></ej-tooltip></a>, imperative, and functional programming styles.
</div>
import { Component } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html'
})
export class DefaultComponent {
content: string;
width: string;
www: string;
widthWWW: string;
position: Object;
objLanguage: string;
widthObj: string;
positionObj: Object;
constructor() {
this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standardized by ECMA International in ECMA-262 and ISO/IEC 16262.';
this.width = '270px';
this.www = "The World Wide Web (WWW) is an information space where documents and other web resources are identified by URLs, interlinked by hypertext links, and can be accessed via the Internet.";
this.widthWWW = "40%";
this.position = {
target:{ horizontal : 10, vertical : 10 }
};
this.objLanguage = "Object-oriented programming (OOP) is a programming language model organized around objects rather than 'actions' and data rather than logic.";
this.widthObj = "35%";
this.positionObj = {
stem: {
horizontal: "right",
vertical: "center"
},
target: {
horizontal: "left",
vertical: "center",
},
};
}
tracking(args){
}
}