Create a ToolTip|UI Control for ASP.NET AJAX, C#, VB.NET

ToolTip Get Started in ASP.NET AJAX

Home > How to > ToolTip Getting Start

Have you ever wondered how to add a tooltip into your web page for a certain target element? In this guiding, we will provide step by step guidance to help you integrate Kettic ToolTip control library into your ASP.NET web application so that you can easily create a custom tooltip.

This guide only provides the necessary basic steps to integrate tooltip control into your ASP.NET AJAX project. If you need to customize the tooltip further, you can check out some other user manuals that we have provided, such as How to Customize ToolTip Properties, How to Create Multiple Tooltips with ToolTip Manager, as well as How to Trigger ToolTip Client Side Event, just to name a few here.

How to Create an ASP.NET Web Application

In this first section, we will show you how to create a Visual C# or Visual Basic .NET ASP.NET Web Application, so you can add a tooltip into it later. Now please verify that you have installed .NET Framework (4.0 or above) and Microsoft Visual Studio (2010 or above) before you get started with the following steps.

Open your MS Visual Studio 2010 first, and then go to File menu to select New | Web Site.
Now please select "ASP.NET Web Site" and then enter a desired name and location path for it.
Now a brand now web site is successfully created!

How to Integrate ToolTip Control to ASP.NET Web Page

In this second section, we are going to integrate Kettic tooltip control library into the web page, which you can get from the ASP.NET web site that you have just created. Now you can follow the guidance below to go on with it.

In your Visual Studio ToolBox, please drag AjaxPanel component and drop to the target web page.
Again in your VS ToolBox, drag Kettic ToolTip control and drop to the previously added AjaxPanel.
Now you see the tooltip control is successfully added to your web page!

How to Customize ToolTip in ASP.NET

After the previous settings, we have successfully added the tooltip control to your web application so you can create a simple tooltip with default settings. In this section, we will focus on how to customize different tooltip properties so you can create a custom tooltip.

First you can click on the smart tag of the tooltip in the Design View of the default web page.
Now you can click the Edit Item and a property window will pop up.
In the property window, you will find all types of supported properties which you can customize freely according to your requirements.

When you are done, you can debug the application to view the result. To learn more about ToolTip property settings, you can go to the Tooltip element page to learn more. We have also listed a few of them here for your reference.

Title: Users can freely add any tooltip title according to your tooltip content.
Text: Web developer can input any content for this tooltip content.
CloseButton: You can add a close button so you can close the tooltip manually by setting true to ManualClose.
Position: You can set this property to define the precise location of your tooltip.
Sticky: Developers can also set true to Sticky property so that the tooltip will not disappear even when the mouse is moved out of it.

ASP.NET AJAX UI Controls

ASP.NET AJAX ToolTip UI Control

Overview

Getting Started

Elements Manager Features

Client Prpgramming

ToolTip Event

Server Prpgramming

ToolTip Event