This article will show how to create tooltip in .net based on jQuery and CSS.
For creating jquery tooltip, first you need to add reference of jQuery library :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
Then after, on *.aspx , add <div> tag in <body> for containing tooltip text in hidden form :
<div class="tooltip" id="divPaid">
<asp:Label ID="lblTooltipText" runat="server" Text="This is just a sample text for showing tooltip content." ></asp:Label> </div>
after that create <a> tag which will show tooltip on mouseover :
<a href='javascript:void(0)' id="lnkTip" onmouseover="simple_tooltip('lnkTip', 'tooltip','lblTooltipText');">
<img src="~/images/tooltip_blue.png" alt="" style="text-decoration: none;
border: 0px; height: 15px;" /></a>
now write simple CSS class which would be responsible for look of tooltip :
.tooltip
{
position: absolute;
z-index: 999;
left: -9999px;
width: 250px;
background-color: #62A2DA;
padding: 5px;
border: 1px solid #828282;
font-family: Arial;
font-size: 12px;
color: #fff;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
}
Finally , jQuery magic method :
function simple_tooltip(target_items, name, content) {
var i = 0;
var temp = "";
temp = "<div class='" + name + "' id='" + target_items + i + "'><p>" + $("[id$=" + content + "]").text() + "</p></div>";
$("body > div").remove();
$("body").append(temp);
var my_tooltip = $("[id$=" + target_items + i + "]");
$('[id$=' + target_items + ']').mouseover(function () {
my_tooltip.css({ display: "none" }).fadeIn(400);
}).mousemove(function (kmouse) {
my_tooltip.css({ left: kmouse.pageX + 15, top: kmouse.pageY + 15 });
}).mouseout(function () {
my_tooltip.fadeOut(400);
});
}
Here is output :
Happy Coding !!!!
