ejTooltip

The Tooltip control will display a popup hint when the user hover/click/focus to the element.

Example

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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};
        }
    }
  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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.

  • html
  • <style>
    .cssClass{
        border: 10px solid grey;
    }
    </style>

    enabled boolean

    Enables or disables the Tooltip.

    Default Value

    • true

    Example

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

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

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

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

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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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

  • html
  • <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>
  • ts
  • 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){
    
        }
    }