I have created Tooltip control that replaces standard browsers' tooltips with custom ones. You can write your own html template to customize it's look and feel.
The control derives on the client from Sys.UI.Control, and is implemented as WebControl on the server.
It is really easy to use it and it gives really nice experience.
Here is a source for a very simple page showing how to use it:
The actual look and feel can be set inside "HtmTemplate" container, where we must place "{0}" and "{1}". "{0}" will be replaced by tooltip title and "{1}" will be replaced by the tooltip text for web control.
In this sample I assigned the following markup to HtmlTemplate property of the control:
Now lets write the page markup for our second sample.
Demo2.aspx:
Also I have several buttons on the page and I want to show tooltips for them as well.
Here is the code behind file for the page:
For each row of the GridView I use different text for the tooltip ("title" attribute) and different tooltip title ("tooltiptitle" attribute)
The control derives on the client from Sys.UI.Control, and is implemented as WebControl on the server.
It is really easy to use it and it gives really nice experience.
Here is a source for a very simple page showing how to use it:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Demo1.aspx.cs" Inherits="Demo1" %>
<%@ Register Assembly="Devarchive.Net" Namespace="Devarchive.Net" TagPrefix="dn" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Demo1</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<dn:HoverTooltip runat="server" ID="tooltip1"
OffsetX="10"
OffsetY="10"
DefaultTooltipText="This is default tooltip text"
DefaultTooltipTitle="This is default title for the tooltip">
<HtmlTemplate>
<div style="border: solid 1px blue; background-color: Yellow; color: Blue; font-weight: bold">
<b>{0}</b>
<p>
{1}</p>
</div>
</HtmlTemplate>
</dn:HoverTooltip>
<div style="background-color:Yellow">
<asp:Label runat="server" ID="lb1" Text="Hover me !" ToolTip="This is a tooltip for lb1" />
</div>
</form>
</body>
</html>
And code behind:
Resulting in:using System;
public partial class Demo1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
tooltip1.AddTooltipControl(lb1);
}
}
The actual look and feel can be set inside "HtmTemplate" container, where we must place "{0}" and "{1}". "{0}" will be replaced by tooltip title and "{1}" will be replaced by the tooltip text for web control.
In this sample I assigned the following markup to HtmlTemplate property of the control:
<div style="border: solid 1px blue; background-color: Yellow; color: Blue; font-weight: bold">
<b>{0}</b>
<p>
{1}</p>
</div>
Of course you can assign a better designed html yourself.
To attach a tooltip to some control on the page you can use "AddTooltipControl" public method of tooltip control. In the sample I use the code:
tooltip1.AddTooltipControl(lb1);
which attaches Label control to our sinned tooltip.
The tooltip finds that there is some text assigned to the "title" attribute of the span element generated by Label control and attaches mouseover and mouseout events to that control to show/hide corresponding tooltip.
"AddTooltipControl" method takes one argument of type "Control", it needs just the ClientID of the control to pass it to the script, the script is where searching for "title" attribute is made. This means you are not limited to attaching tooltips only to WebControls, any control can be specified, you have to ensure only that control is rendered with correct "title" attribute.
Tooltip control has also following four properties:
OffsetX, OffsetY - tooltip will appear with horizontal/vertical offset to the place where the cursor currently is,
DefaultTooltipText - this text will appear for controls that don't have title attribute set (Tooltip property on the server).
DefaultTooltipTitle - this text will appear for controls that don't have "tooltiptitle" attribute set. This is additional attribute that you can assign to the control. It will be rendered on the place where "{0}" placeholder will reside.
That's it about properties, now let's write some more attractive sample.
The nice thing about the control is - we can place tooltip design into Skin file. We can write there severat tooltip styles with different HtmlTemplate properties, and then use the skins to quickly style tooltips on different pages.
For the sample I created new Theme, and placed inside it my skin and css files that define the design of the tooltip controls:
Tooltip.skin file has the following contents:
Here I created two skins for my tooltips.<%@RegisterAssembly="Devarchive.Net"Namespace="Devarchive.Net"TagPrefix="dn"%>
<dn:HoverTooltip runat="server"SkinID="RounderCornersTooltip"
OffsetX="10"OffsetY="10"
DefaultTooltipText=""
DefaultTooltipTitle="Rounded Tooltip">
<HtmlTemplate>
<tablecellpadding="0"cellspacing="0"style="background-color:white;">
<tr>
<tdvalign="top"class="corner">
<asp:Imagerunat="server"ID="img1"Width="5px"Height="5px"
ImageUrl="~/App_Themes/Default/Img/ctl.gif" />
</td>
<tdstyle="border-top: solid 1px #758611;"class="spacer">
</td>
<tdvalign="top"class="corner">
<asp:Imagerunat="server"ID="img2"Width="5px"Height="5px"
ImageUrl="~/App_Themes/Default/Img/ctr.gif" />
</td>
</tr>
<tr>
<tdstyle="border-left: solid 1px #758611"width="1">
</td>
<tdalign="left"valign="top"style="width:150px;">
<b>{0}</b><br>
<p>{1}</p>
</td>
<tdstyle="border-right: solid 1px #758611"width="1">
</td>
</tr>
<tr>
<tdvalign="bottom"class="corner">
<asp:Imagerunat="server"ID="img3"Width="5px"Height="5px"
ImageUrl="~/App_Themes/Default/Img/cbl.gif" />
</td>
<tdstyle="border-bottom: solid 1px #758611"class="spacer">
</td>
<tdvalign="bottom"class="corner">
<asp:Imagerunat="server"ID="img4"Width="5px"Height="5px"
ImageUrl="~/App_Themes/Default/Img/cbr.gif" />
</td>
</tr>
</table>
</HtmlTemplate>
</dn:HoverTooltip>
<dn:HoverTooltip runat="server"SkinID="GoupBoxTooltip"
OffsetX="10"OffsetY="10"
DefaultTooltipText=""
DefaultTooltipTitle="Rounded Tooltip">
<HtmlTemplate>
<divclass="GoupBoxTooltip">
<tableborder="0"cellpadding="6"cellspacing="1"class="tborder"width="180">
<thead>
<tr>
<tdclass="thead">
{0}
</td>
</tr>
</thead>
<tbody id="collapseobj_forumrules">
<tr>
<tdclass="alt1">
{1}
</td>
</tr>
</tbody>
</table>
</div>
</HtmlTemplate>
</dn:HoverTooltip>
Now lets write the page markup for our second sample.
Demo2.aspx:
Now as you see it is much simpler to created styled tooltip:<%@ Page Theme="Default" Language="C#" AutoEventWireup="true" CodeFile="Demo2.aspx.cs" Inherits="Demo2" %>
<%@ Register Assembly="Devarchive.Net" Namespace="Devarchive.Net" TagPrefix="dn" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Demo2</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<dn:HoverTooltip runat="server" ID="tooltip1" SkinID="GoupBoxTooltip">
</dn:HoverTooltip>
<dn:HoverTooltip runat="server" ID="tooltip2" SkinID="RounderCornersTooltip">
</dn:HoverTooltip>
<br />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
CellPadding="4" ForeColor="#333333" GridLines="None"
onrowdatabound="GridView1_RowDataBound">
<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
<Columns>
<asp:BoundField DataField="FirstName" HeaderText="First Name" />
<asp:BoundField DataField="LastName" HeaderText="Last Name" />
</Columns>
<PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
<br /><br />
<asp:Button OnClientClick="return false" runat="server" Text="Submit" ID="Button1"
ToolTip="This button <span class='highlight'>Submits</span>" />
<asp:Button OnClientClick="return false" runat="server" Text="Cancel" ID="Button2"
ToolTip="This button <span class='highlight'>Cancels</span>" />
<asp:Button OnClientClick="return false" runat="server" Text="Delete" ID="Button3"
ToolTip="This button <span class='highlight'>Deletes</span>" />
<asp:Button OnClientClick="return false" runat="server" Text="Insert" ID="Button4"
ToolTip="This button <span class='highlight'>Inserts</span>" />
<asp:Button OnClientClick="return false" runat="server" Text="Edit" ID="Button5"
ToolTip="This button <span class='highlight'>Edits</span>" />
<div>
</div>
</form>
</body>
</html>
<dn:HoverTooltip runat="server" ID="tooltip1" SkinID="GoupBoxTooltip">I have GridView on the page that lists some employees from Northwind database, - only their full names, I want to attach tooltips to each row, and when we hover the row I want to show some additional data about the Employee being hovered.
</dn:HoverTooltip>
<dn:HoverTooltip runat="server" ID="tooltip2" SkinID="RounderCornersTooltip">
</dn:HoverTooltip>
Also I have several buttons on the page and I want to show tooltips for them as well.
Here is the code behind file for the page:
using System;For buttons I want to use different TooltipTitle for each. For this I am assigning them "tooltiptitle" attributes.
using System.Data;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Demo2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
tooltip2.AddTooltipControl(Button1);
Button1.Attributes.Add("tooltiptitle", "Note:");
tooltip2.AddTooltipControl(Button2);
Button2.Attributes.Add("tooltiptitle", "Note:");
tooltip2.AddTooltipControl(Button3);
Button3.Attributes.Add("tooltiptitle", "Note:");
tooltip2.AddTooltipControl(Button4);
Button4.Attributes.Add("tooltiptitle", "Note:");
tooltip2.AddTooltipControl(Button5);
Button5.Attributes.Add("tooltiptitle", "Note:");
string fileName = Server.MapPath("~/App_Data/TooltipSampleData.xml");
DataTable dt = new DataTable();
dt.ReadXml(fileName);
GridView1.DataSource = dt;
GridView1.DataBind();
}
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
DataRowView drv = (DataRowView)e.Row.DataItem;
if (drv != null)
{
e.Row.Style.Add(HtmlTextWriterStyle.Cursor, "pointer");
//e.Row.ID = String.Format("row{0}", drv["EmployeeID"]);
tooltip1.AddTooltipControl(e.Row);
e.Row.Attributes["title"] = drv["Notes"].ToString();
e.Row.Attributes["tooltiptitle"] = String.Format("Notes for {0} {1}:", drv["FirstName"], drv["LastName"]);
}
}
}
}
For each row of the GridView I use different text for the tooltip ("title" attribute) and different tooltip title ("tooltiptitle" attribute)
No comments:
Post a Comment