This article will show you how you can create a tool tip
using jquery in asp.net. in this I have
used a hyper link on which I have shown the tool tip.
Some of my previous articles are as follows: Dynamic
Vertical Css Menu Using jQuery, Css and C#.net In Asp.net MVC, jQuery
Message Open As Modal Dialog Box In Asp.Net Without Refresh With Ok Button,
jQuery
DatePicker Calendar With Slide Down and Slide Up Effect In Asp.Net, Password
Strength Validation in Asp.net MVC Using jQuery, Bind
jQuery DatePicker Calendar In MVC WebGrid and Retrive Value Using Asp.net MVC,
C#.Net.
So for this article first I will create a new asp.net application
and add the below library reference as shown below.
<link
rel="stylesheet"
href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
|
Now add the below code in your header.
<style>
body
{
font-size:11px;
}
</style>
<script>
$(function
() {
$(document).tooltip({
track: true
});
});
</script>
|
In above code I have shown the tool tip and add the tracker is true. This will help on moving the tool tip as per
the mouse pointer location. In this i have shown the title text in tooltip.
Here is the complete code of the page.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1"
%>
<!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>Link Button or HyperLink With Mouse Tracking ToolTip Using jQuery in Asp..Net
</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<style>
body
{
font-size:11px;
}
</style>
<script>
$(function
() {
$(document).tooltip({
track: true
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<a href="#" title="WELCOME TO ASPDOTNET-POOLS.COM"><h2>Welcome to
aspdotnet-pools.com</h2></a>
</div>
</form>
</body>
</html>
|
Now we have done run the application to check the output.
About the Author
0 comments:
Please let me know your view