User friendly Tooltip using Ajax Hover Menu Extender control
Hi
I was looking for a tooltip control where we can embed html and display desired output to provide user friendly interface. Using default ASP.NET Tooltip control we can not embed HTML, even though it is feasible to use CSS style to change look and feel still it lacks number of features.
Using Ajax Hover Menu Extender control is is quite easier to implement a Tooltip where you can embed HTML tags to get desired output. when tooltip text is more, scroll bar is displayed to scroll through to read complete text.
Step 1
After downloading, adding the Ajax Control toolkit to your ToolBox in Visual Studio, register AjaxControlToolKit on top of your aspx as below.
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="AjaxControl" %>
Step 2
Add Script Manager on aspx page as below.
<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager>
Step 3
Use Hover Menu Extender control where the TargetControl ID is your desired control, Tooltip text is displayed from the Label control and CSS class is for styling as shown below.
<asp:Image ID="imgName" runat="server" ImageUrl="~/Images/Tooltip.gif" />
<cc1:HoverMenuExtender ID="HoverMenuExtender2" runat="server"
TargetControlID="imgName" PopupControlID="lblTooltipTxt"
OffsetX="30" OffsetY="0" />
<asp:Label ID="lblTooltipTxt" runat="server" CssClass="tooltip"
Text="Your Tooltip Text HERE"/>Style sheet class
Here is the style sheet source code used for the tooltip.
.tooltip
{
border:2px solid #317082; /* Border width */
left:18px; /* Same as border thickness */
top:0px;
position:absolute;
width:500px; /*Width of tooltip content */
height:100px; /* Height of tooltip content */
background-color:#FFF; /* Background color */
padding:5px; /* Space between border and content */
font-size:1.0em; /* Font size of content */
overflow:auto; /* Hide overflow content */
z-index:1000001;
}output
When you hover on the image tooltip is displayed as shown below.
Hope you find it useful!