ejTooltip

11 Jul 201824 minutes to read

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

Syntax

$(element).ejTooltip(options);

Name	Type	Description
options	object	settings for Tooltip

Example

HTML

<div class="control">
        TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
    </div>
 
    // Creates the Tooltip
    <script>
        $("#test").ejTooltip(
		{
		     content: "JavaScript is the programming language of HTML and the Web."
		});
    </script>

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 class="control">
        TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
    </div>
    <script>
        $("#test").ejTooltip(
		 {
		     content: "JavaScript is the programming language of HTML and the Web.",
		     allowKeyboardNavigation: true
             
		 });
    </script>

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

Example

HTML

<div class="control">
        
    <div class="control">
        TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
    </div>
    <script type="text/javascript">

        $("#test").ejTooltip(
        {
            content: "JavaScript is the programming language of HTML and the Web.",
            animation :{ effect : "slide", speed : 1000}
        });

    </script>

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 class="control">
        TypeScript lets you write <a id="test"><u> JavaScript</u> </a> the way you really want to.
    </div>
    <script type="text/javascript">

        $("#test").ejTooltip(
        {
            content: "JavaScript is the programming language of HTML and the Web.",
            associate: "mousefollow"
        });

    </script>

And also, absolute positioning via horizontal(x), vertical(y) e.g. A Tooltip at 10px from left and top of the page:

HTML

{:.example}

    <div class="control">
        TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
    </div>
    <script type="text/javascript">

        $("#test").ejTooltip(
        {
            content: "JavaScript is the programming language of HTML and the Web.",
            associate: "axis",
            position :{
               target:{  horizontal : 10, vertical : 10 }
            }
        });

    </script>

autoCloseTimeout `number`

Specified the delay to hide Tooltip when closeMode is auto.

Default Value

4000

Example

HTML

<div class="control">
        TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
    </div>
    <script type="text/javascript">

        $("#test").ejTooltip(
        {
            content: "JavaScript is the programming language of HTML and the Web.",
            closeMode: "auto",
            autoCloseTimeout : 5000
            
        });

    </script>

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

{:.example}

        <div class="control">
            TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
        </div>
        <script type="text/javascript">

            $("#test").ejTooltip(
            {
                content: "JavaScript is the programming language of HTML and the Web.",
                closeMode : "sticky"
            });

        </script>

Example

HTML

<div class="control">
            TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
        </div>
        <script type="text/javascript">

            $("#test").ejTooltip(
            {
                content: "JavaScript is the programming language of HTML and the Web.",
                closeMode : "auto"
            });

        </script>

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 class="control">
        TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
    </div>
    <script type="text/javascript">

        $("#test").ejTooltip(
        {
            content: "JavaScript is the programming language of HTML and the Web.",
            collision : "fit"
   
        });

    </script>

Example

HTML

<div class="control">
        TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
    </div>
    <script type="text/javascript">

        $("#test").ejTooltip(
        {
            content: "JavaScript is the programming language of HTML and the Web.",
            collision : "flip"
  
        });

    </script>

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>
    <script type="text/javascript">

        $("#test").ejTooltip(
        {
            content: "JavaScript is the programming language of HTML and the Web.",
            containment : ".frame"
   
        });

    </script>

content `string`

Specifies the text for Tooltip.

Default Value

null

Example

HTML

{:.example}

    <div class="control">
        TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
    </div>
    <script>
        $("#test").ejTooltip(
		 {
		     content: "JavaScript is the programming language of HTML and the Web."
		  
		 });
    </script>

cssClass `string`

Sets the root CSS class for Tooltip for the customization.

Default Value

null

Example

HTML

<head>
        <style>
    		.myStyle{
    			background-color :#d588c3;
    			color : blue;
    			border-color : #4cf522;
    		}
    		.myStyle:before{
    			
    			border-right-color: #4cf522;
    		}
    		.myStyle:after{
    			
    			border-right-color: #d588c3;
    		}
        </style>
    </head>
    <div class="control">
        TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
    <div>
    <script type="text/javascript">

        $("#test").ejTooltip(
	    {
               content: "JavaScript is the programming language of HTML and the Web.",
                cssClass : "myStyle"
         });
            
     </script>

enabled `boolean`

Enables or disables the Tooltip.

Default Value

true

Example

HTML

<div class="control">
            TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
        </div>
        <script type="text/javascript">

            $("#test").ejTooltip(
            {
                content: "JavaScript is the programming language of HTML and the Web.",
                enabled: false
            });

        </script>

enableRTL `boolean`

Sets the Tooltip direction from right to left.

Default Value

false

Example

HTML

<div class="control">
        TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
    </div>
    <script>
        // Initializes the Tooltip with the enableRTL value specified.
         $("#test").ejTooltip(
		 {
		     content: "JavaScript is the programming language of HTML and the Web.",
             enableRTL: true 
             
		 });
    </script>

height `string|number`

Defines the height of the Tooltip popup.

Default Value

auto

Example

HTML

<div class="control">
            TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
        </div>
        <script type="text/javascript">

            $("#test").ejTooltip(
            {
                content: "JavaScript is the programming language of HTML and the Web.",
                height :"50px"
            });

        </script>

isBalloon `boolean`

Enables the arrow in Tooltip.

Default Value

true

Example

HTML

<div class="control">
            TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
        </div>
        <script type="text/javascript">

            $("#test").ejTooltip(
            {
                content: "JavaScript is the programming language of HTML and the Web.",
                isBalloon :false
            });

        </script>

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

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

Example

HTML

<div class="control">
            TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
        </div>
        <script type="text/javascript">

            $("#test").ejTooltip(
            {
                content: "JavaScript is the programming language of HTML and the Web.",
                 position:{
						target :{
							horizontal : "center",
							vertical : "top"
						},
						stem: {
						    horizontal: "center",
						    vertical: "bottom"
						}
					}
            });

        </script>

showRoundedCorner `boolean`

Enables or disables rounded corner.

Default Value

false

Example

HTML

<div class="control">
        TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
    </div>
    <script type="text/javascript">

        $("#test").ejTooltip(
        {
            content: "JavaScript is the programming language of HTML and the Web.",
            showRoundedCorner :true
        });

    </script>

showShadow `boolean`

Enables or disables shadow effect.

Default Value

false

Example

HTML

<div class="control">
        TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
    </div>
    <script type="text/javascript">

        $("#test").ejTooltip(
        {
            content: "JavaScript is the programming language of HTML and the Web.",
            showShadow :true
        });

    </script>

target `string`

Specified a selector for elements, within the container.

Default Value

null

Example

HTML

<table id="details">
            <tr>
                <th>EmployeeID</th>
                <th>Name</th>
                <th>Designation</th>
            </tr>
            <tr>
                <td>SF6089</td>
                <td><a href="#" class="e-info" title="Peter">Peter</a></td>
                <td>Software Engineer</td>
            </tr>
            <tr>
                <td>SF6073</td>
                <td> <a href="#" class="e-info" title="Joe">Joe </a> </td>
                <td>Tester</td>
            </tr>
            <tr>
                <td>SF6073</td>
                <td> <a href="#"class="e-info" title="Lois"> Lois </a> </td>
                <td>Content Writer</td>
            </tr>
            <tr>
                <td>SF7896</td>
                <td> <a href="#" class="e-info" title="Cleveland"> Cleveland </a> </td>
                <td>Graphics Designer</td>
            </tr>
        </table>

        <script type="text/javascript">

            $("#detail").ejTooltip(
            {
                target: ".e-info"
       
            });

        </script>
        <style>
             table {
                border-collapse: collapse;
                width: 100%;
            }

            th, td {
                text-align: left;
                padding: 8px;
            }
            tr:nth-child(even) {
                background-color: #f2f2f2;
            }

            th {
                background-color: #4CAF50;
                color: white;
            }
        </style>

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

tip.size.height `number`

Sets the Tooltip height.

Default Value

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

tip.adjust.yValue `number`

Sets vertical gap between Tooltip and target element.

Default Value

Example

HTML

<div class="control">
        TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
    </div>

    <script type="text/javascript">

        $("#test").ejTooltip(
		{
		    content: "JavaScript is the programming language of HTML and the Web.",
		    tip :{
					size : { width : 25, height : 12},
					adjust : {xValue : 5, yValue: 6}
				}
		});

    </script>

title `string`

The title text to be displayed in the Tooltip header.

Default Value

null

Example

HTML

<div class="control">
        TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
    </div>

    <script type="text/javascript">

        $("#test").ejTooltip(
		{
		    content: "JavaScript is the programming language of HTML and the Web.",
		    title : "Header"
		});

    </script>

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 class="control">
        TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
    </div>

    <script type="text/javascript">

        $("#test").ejTooltip(
		{
		    content: "JavaScript is the programming language of HTML and the Web.",
		    trigger : "click"
		});

    </script>

The below example will cause the Tooltip to be shown when the target element is focused:

Example

HTML

<div class="control">
        TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
    </div>

    <script type="text/javascript">

        $("#test").ejTooltip(
		{
		    content: "JavaScript is the programming language of HTML and the Web.",
		    trigger : "focus"
		});

    </script>

width `string|number`

Defines the width of the Tooltip popup.

Default Value

auto

Example

HTML

<div class="control">
        TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
    </div>

    <script type="text/javascript">

        $("#test").ejTooltip(
		{
		    content: "JavaScript is the programming language of HTML and the Web.",
		    width:"100px"
		});

    </script>

Methods

destroy()

Destroys the Tooltip control.

Returns:

Void

Example

HTML

<div class="control">
            TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
     </div>

    <script type="text/javascript">

	    var tipObj =$("#test").ejTooltip(
		{
            content: "JavaScript is the programming language of HTML and the Web."
		}).data("ejTooltip");
	    tipObj.destroy();

    </script>

HTML

<div class="control">
            TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
     </div>

    <script type="text/javascript">

	    $("#test").ejTooltip(
		{
            content: "JavaScript is the programming language of HTML and the Web."
		});
	    $("#test").ejTooltip('destroy');

    </script>

disable()

Disables the Tooltip control.

Returns:

Void

Example

HTML

<div class="control">
            TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
     </div>

    <script type="text/javascript">

	    var tipObj =$("#test").ejTooltip(
		{
            content: "JavaScript is the programming language of HTML and the Web."
		}).data("ejTooltip");
	    tipObj.disable();

    </script>

HTML

<div class="control">
            TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
     </div>

    <script type="text/javascript">

	    $("#test").ejTooltip(
		{
            content: "JavaScript is the programming language of HTML and the Web."
		});
	    $("#test").ejTooltip('disable');

    </script>

enable()

Enables the Tooltip control.

Returns:

Void

Example

HTML

<div class="control">
            TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
     </div>

    <script type="text/javascript">

	    var tipObj =$("#test").ejTooltip(
		{
            content: "JavaScript is the programming language of HTML and the Web."
		}).data("ejTooltip");
	    tipObj.enable();

    </script>

HTML

<div class="control">
            TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
    </div>

    <script type="text/javascript">

	    $("#test").ejTooltip(
		{
            content: "JavaScript is the programming language of HTML and the Web."
		});
	    $("#test").ejTooltip('enable');

    </script>

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 class="control">
            TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
     </div>

    <script type="text/javascript">

	    var tipObj =$("#test").ejTooltip(
		{
            content: "JavaScript is the programming language of HTML and the Web."
		}).data("ejTooltip");
	    tipObj.hide();

    </script>

HTML

<div class="control">
            TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
    </div>

    <script type="text/javascript">

	    $("#test").ejTooltip(
		{
            content: "JavaScript is the programming language of HTML and the Web."
		});
	    $("#test").ejTooltip('hide');

    </script>

HTML

<div class="control">
            TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
    </div>
    <button id="open">Hide</button>
 
    // Creates the Tooltip
    <script>
    
        $("#test").ejTooltip(
		{
		     content: "JavaScript is the programming language of HTML and the Web."
		});
        tip = $("#test").data("ejTooltip");
        tip.show();
        
        $("#open").ejButton({
            size: "large",
            showRoundedCorner: true,
            click: "onClick",

        });
      
        function onClick(args){
        	tip = $("#test").data("ejTooltip");
        	tip.hide("myFunc");
        }
        
         function myFunc(args) {
			tip = $("#test").data("ejTooltip");
			$(tip.tooltip).slideDown(200, "easeOutElastic");
        
        }
        
    </script>

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 class="control">
            TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
     </div>

    <script type="text/javascript">

	    var tipObj =$("#test").ejTooltip(
		{
            content: "JavaScript is the programming language of HTML and the Web."
		}).data("ejTooltip");
	    tipObj.show();

    </script>

HTML

<div class="control">
            TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
    </div>

    <script type="text/javascript">

	    $("#test").ejTooltip(
		{
            content: "JavaScript is the programming language of HTML and the Web."
		});
	    $("#test").ejTooltip('show');

    </script>

HTML

<div class="control">
            TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
    </div>
    <button id="open">Open</button>
 
    // Creates the Tooltip
    <script>
    
        $("#test").ejTooltip(
		{
		     content: "JavaScript is the programming language of HTML and the Web."
		});
        
        $("#open").ejButton({
            size: "large",
            showRoundedCorner: true,
            click: "onClick",

        });
      
        function onClick(args){
        	tip = $("#test").data("ejTooltip");
        	tip.show("myFunc");
        }
        
         function myFunc(args) {
			tip = $("#test").data("ejTooltip");
			$(tip.tooltip).slideDown(200, "easeOutElastic");
        
        }
        
    </script>

HTML

<div class="control">
            TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
    </div>
    <div class="new">
            JavaScript is a high-level, dynamic, untyped, and <a id="newPosition" href="#"> interpreted </a>programming language.
    </div>
    <button id="open">Re position</button>
 
    // Creates the Tooltip
    <script>
    
        $("#test").ejTooltip(
		{
		     content: "JavaScript is the programming language of HTML and the Web."
		});
        
        $("#open").ejButton({
            size: "large",
            showRoundedCorner: true,
            click: "onClick",

        });
      
        function onClick(args){
        	tip = $("#test").data("ejTooltip");
        	tip.show("#newPosition");
        }
 
    </script>

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 class="control">
        TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
    </div>

    <script type="text/javascript">
	    $("#test").ejTooltip(
		{
            content: "JavaScript is the programming language of HTML and the Web.",
            beforeClose: function (args) {
               // do your changes
            }
        });
    </script>

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 class="control">
        TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
    </div>

    <script type="text/javascript">
	    $("#test").ejTooltip(
		{
            content: "JavaScript is the programming language of HTML and the Web.",
            beforeOpen: function (args) {
               // do your changes
            }
        });
    </script>

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 class="control">
        TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
    </div>

    <script type="text/javascript">
	    $("#test").ejTooltip(
		{
            content: "JavaScript is the programming language of HTML and the Web.",
            trigger: "click",
            click: function (args) {
               // do your changes
            }
        });
    </script>

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 class="control">
        TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
    </div>

    <script type="text/javascript">
	    $("#test").ejTooltip(
		{
            content: "JavaScript is the programming language of HTML and the Web.",
            close: function (args) {
               // do your changes
            }
        });
    </script>

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 class="control">
        TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
    </div>

    <script type="text/javascript">
	    $("#test").ejTooltip(
		{
            content: "JavaScript is the programming language of HTML and the Web.",
            create: function (args) {
               // do your changes
            }
        });
    </script>

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 class="control">
        TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
    </div>

    <script type="text/javascript">
	    $("#test").ejTooltip(
		{
            content: "JavaScript is the programming language of HTML and the Web.",
            destroy: function (args) {
               // do your changes
            }
        });
    </script>

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 class="control">
        TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
    </div>

    <script type="text/javascript">
	    $("#test").ejTooltip(
		{
            content: "JavaScript is the programming language of HTML and the Web.",
            hover: function (args) {
               // do your changes
            }
        });
    </script>

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 class="control">
        TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
    </div>

    <script type="text/javascript">
	    $("#test").ejTooltip(
		{
            content: "JavaScript is the programming language of HTML and the Web.",
            open: function (args) {
               // do your changes
            }
        });
    </script>

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 class="control">
        TypeScript lets you write <a id="test"><u> JavaScript</u> </a>the way you really want to.
    </div>

    <script type="text/javascript">
	    $("#test").ejTooltip(
		{
            content: "JavaScript is the programming language of HTML and the Web.",
            associate :"mouse",
            tracking: function (args) {
               // do your changes
            }
        });
    </script>

ejTooltip

Syntax

Example

Requires

Members

allowKeyboardNavigation boolean

Default Value

Example

animation object

animation.effect enum

Default Value

animation.speed number

Default Value

Example

associate enum

Default Value

Example

autoCloseTimeout number

Default Value

Example

closeMode enum

Default Value

Example

Example

collision enum

Default Value

Example

Example

containment string

Default Value

Example

content string

Default Value

Example

cssClass string

Default Value

Example

enabled boolean

Default Value

Example

enableRTL boolean

Default Value

Example

height string|number

Default Value

Example

isBalloon boolean

Default Value

Example

position object

position.target object

position.target.horizontal string|number

Default Value

position.target.vertical string|number

Default Value

position.stem object

position.stem.horizontal string

Default Value

position.stem.vertical string

Default Value

Example

showRoundedCorner boolean

Default Value

Example

showShadow boolean

Default Value

Example

target string

Default Value

Example

tip object

tip.size object

tip.size.width number

Default Value

tip.size.height number

Default Value

tip.adjust object

tip.adjust.xValue number

Default Value

tip.adjust.yValue number

allowKeyboardNavigation `boolean`

animation `object`

animation.effect `enum`

animation.speed `number`

associate `enum`

autoCloseTimeout `number`

closeMode `enum`

collision `enum`

containment `string`

content `string`

cssClass `string`

enabled `boolean`

enableRTL `boolean`

height `string|number`

isBalloon `boolean`

position `object`

position.target `object`

position.target.horizontal `string|number`

position.target.vertical `string|number`

position.stem `object`

position.stem.horizontal `string`

position.stem.vertical `string`

showRoundedCorner `boolean`

showShadow `boolean`

target `string`

tip `object`

tip.size `object`

tip.size.width `number`

tip.size.height `number`

tip.adjust `object`

tip.adjust.xValue `number`

tip.adjust.yValue `number`

title `string`

trigger `enum`

width `string|number`