This article will show you how you can display tool tip ant
top right corner of the hyper link in asp.net using jquery. This tool tip will
display on mouse over. With question mark in mouse cursor.
Some of my previous articles are as follows: jQuery
Tooltip With Animation Explode Effect In Asp.Net, User
Registration Form With ToolTip Message and Validation Using jQuery, C#.Net in
Asp.Net, Link
Button or HyperLink With Mouse Tracking ToolTip Using jQuery in Asp.Net,
Display
Validation in ToolTip Using ValidatorCalloutExtender in Asp.Net, jQueryUI
Tooltip Using jQuery on Textbox MouseOver in Asp.Net, Display
User Detail Using jQuery ToolTip In Asp.Net MVC WebGrid.
So for this article first we will create a new asp.net application and add the below library reference in the header of the page.
So for this article first we will create a new asp.net application and add the below library reference in the header of the page.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet"
href="http://tipso.object505.com/tipso.css">
<script src="http://tipso.object505.com/tipso.js"></script>
<link rel="stylesheet"
href="http://tipso.object505.com/animate.css">
|
Now add a hyper link into the page.
<a href="#" class="top-right" data-tipso="This is a top-right tooltip using jQuery in
Asp.Net Link">ToolTip at Top-Right</a>This is an Example
|
In above code I have added tooltip value in data-tipso. Now we add the below code to show the tooltip at right corner of the link.
<script>
jQuery(document).ready(function(){
jQuery('.top-right').tipso({
position: 'top-right',
background: 'rgba(0,0,0,0.8)',
titleBackground: 'tomato',
titleContent: 'Some title',
useTitle: false,
tooltipHover: true
});
});
</script>
|
Now here is the complete code.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication4.WebForm2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery Top Right ToolTip On Hyper Link With Question
Mark Sign On Mouse Cursor In Asp.net</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet"
href="http://tipso.object505.com/tipso.css">
<script src="http://tipso.object505.com/tipso.js"></script>
<link rel="stylesheet"
href="http://tipso.object505.com/animate.css">
<script>
jQuery(document).ready(function(){
jQuery('.top-right').tipso({
position: 'top-right',
background: 'rgba(0,0,0,0.8)',
titleBackground: 'tomato',
titleContent: 'Some title',
useTitle: false,
tooltipHover: true
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<br />
<br />
<br />
<br />
<br />
<br />
<div>
<a href="#" class="top-right" data-tipso="This is a top-right tooltip using jQuery in
Asp.Net Link">ToolTip at Top-Right</a>This is an Example
</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