typescript-docs/TypeScript/Tooltip/HowTo.md

layout	title	description	platform	control	documentation	keywords
post	How To section of Tooltip widget	How To section of Tooltip widget	Typescript	Tooltip	ug	ejTooltip, Tooltip,Tooltip widget

How To

Use AJAX to generate the Tooltip’s content

Use jQuery’s built-in AJAX functionality to retrieve remote content and set the content to the Tooltip as follows.

Define three employee’s JSON Array as given below(an array of 3 employees records)

{% highlight Js %}

[ { "EmployeeID": 1, "LastName": "Davolio", "Title": "Sales Representative", "TitleOfCourtesy": "Dr.", "Address": "507 - 20th Ave. E.Apt. 2A", "City": "Seattle", "Region": "WA", "PostalCode": "98122",

},
{
    "EmployeeID": 2,
    "LastName": "Buchanan",
    "Title": "Sales Representative",
    "TitleOfCourtesy": "Dr.",
    "Address": "908 W. Capital Way",
    "City": "Tacoma",
    "Region": "WA",
    "PostalCode": "98401",
    
},
{
    "EmployeeID": 3,
    "LastName": "Leverling",
    "Title": "Sales Representative",
    "TitleOfCourtesy": "Dr.",
    "Address": "722 Moss Bay Blvd.",
    "City": "Kirkland",
    "Region": "WA",
    "PostalCode": "98033",
    
}

]

{% endhighlight %}

Render the employees table and create the tooltip. Once the tooltip created, the data will be fetched using AJAX method as follows.

{% highlight html %}

EmployeeID	Name	Designation
SF6089	Davolio	Software Engineer
SF6073	Leverling	Tester
SF6073	Suyama	Content Writer
SF7896	Buchanan	Graphics Designer

{% endhighlight %}

Defines the style for the tooltip layout and table as follows.

{% highlight html %}

{% endhighlight %}

Integration with the Slider control

Tooltip can also be integrated with various other jQuery plugin. Tooltip shows the slider value above the handle.

Render the slider control and finds its handle to render the Tooltip as follows

{% highlight html %}

Details of Loan

<span class="ColumnLeft">
    <span class="loan">Loan Amount</span>
</span>
<span class="ColumnRight">
    <span class="value">1000</span><span id="loantext">$ </span>
</span>
<div id="loanSlider">
</div>

{% endhighlight %}

Once the handler in the slider, start its sliding the below function will be triggered

{% highlight html %}

function onSlide(args) {

this.wrapper.prev().children('span.value').html(args.value);
var target = "#" + args.id, value = args.value.toString();
if(args.id == "loanSlider")
    value =  "$ " +value;
var tipWidth = (value < 10) ? "13px" : (10 <= value >= 100) ? "25px" : "auto";
var tipObj = $($("div" + target).find(".e-handle")).data("ejTooltip");
tipObj.setModel({content : value, width : tipWidth});
tipObj.show($("div" + target).find(".e-handle"));

}

{% endhighlight %}

Once the sliding is stopped, the Tooltip will be shown for the particular period of time then it will be closed.

{% highlight html %}

function onStop(args){ setTimeout( function(){ var target = "#" + args.id; var tipObj = (("div" + target).find(".e-handle")).data("ejTooltip"); tipObj.hide(); }, 1000); }

{% endhighlight %}

Tip(arrow) customization

Styling the Tip's background and border colors is done using "cssClass" API of Tooltip. Change the size of the tip using the property name called "Tip" and CSS as follows.

{% highlight html %}

Roslyn Succinctly

{% endhighlight %}

Defines the style for the tip as follow as

{% highlight html %}

{% endhighlight %}

Initialize Tooltip for the target element

Tooltips are also useful for form elements, to show some additional information in the context of each field.

Rather than using multiple Tooltips, a single Tooltip can be used to show the information of each and every field of the form/table element. This can be achieved using “target” API. Target property Specifies a selector for elements, within the container, for which the Tooltip will be displayed.

The example below demonstrates how to create a Tooltip for multiple targets element.

{% highlight html %}

        <tr>
            <td class="info"> Password:</td>
            <td> <input type="password" class="e-info" name="password" title="Be at least 8 characters length"></td>
        </tr>
        <tr>
            <td class="info"> Confirm Password:</td>
            <td> <input type="password" class="e-info" name="Cpwd" title="Re-enter your password"></td>
        </tr>
    </table>
    <input id="sample" type="submit" value="Submit">
    <input id="clear" type="reset" value="Reset">
</fieldset>

{% endhighlight %}

Apply the following styles to the form element.

{% highlight html %}

{% endhighlight %}

Interact with the Tooltip

Give users, the possibility to interact with the tooltip. If the tooltip is interactive and activated by a hover event, set the amount of time (milliseconds)allowed for a user to hover off of the tooltip activator on to the tooltip itself – keeping the tooltip from closing using “autoCloseTimeout” property.

Using this property, Links can be provided in Tooltip content where user can navigate to some other page. This is handy for situations where you need to grab the user attention.

{% highlight html %}

TypeScript lets you write JavaScript the way you really want to.

// Creates the Tooltip

{% endhighlight %}

User Name:
Email Address: