my friend Ohm Ganesh asked for a tooltip sample in jQuery. I used a jquery plugin from http://flowplayer.org/tools/demos/tooltip/index.html
You can download the tooltip image from the above mentioned site itself. If not required, you can remove the "backgroud" property in the css class.
aspx with javascript in it:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jTooltip.aspx.cs" Inherits="jTooltip" %>
<!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 runat="server">
<title></title>
<style type="text/css">
.tooltip
{
display: none;
background: transparent url(_assets/images/black_arrow.png);
font-size: 12px;
height: 70px;
width: 160px;
padding: 25px;
color: #fff;
}
</style>
<script src="_assets/scripts/jquery/jquery-1.7.1.js" type="text/javascript"></script>
<script src="_assets/scripts/jquery/jquery.tools.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#lblText").tooltip();
$("#tblSample tr").each(function(){
$("td:eq(2)", this).tooltip();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<asp:Label ID="lblText" runat="server" Text="Hello World" ToolTip="this is tool tip" />
Please hover on the<h2> column 3</h2> to see the tooltip
<table id="tblSample" border="1">
<tr>
<td>
1
</td>
<td>
achu
</td>
<td title="they call him 'super'">
madurai
</td>
</tr>
<tr>
<td>
2
</td>
<td>
ohm
</td>
<td title="he is from a village">
kovilpatti
</td>
</tr>
<tr>
<td>
3
</td>
<td>
kathir
</td>
<td title="he is sumaaaar guy only">
karur
</td>
</tr>
<tr>
<td>
4
</td>
<td>
ranjith
</td>
<td title="good leader we had">
kerala
</td>
</tr>
<tr>
<td>
5
</td>
<td>
jegan
</td>
<td title="very good moulded person">
chennai
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
