jquery tooltip with css in asp.net web page
How to use jquery tooltip with css in asp.net web application:
In this post we take an example and show how to use use jquery
tooltip in asp.net web application. In the old post we describe how to use use
tooltip with gridview control and we also take many other example of jquerytooltip and use of tooltip on page. and Display tooltip dropdownlist items. one more post we consider on this tutorial is jquery disable or Enable submit button Now we take one more example here for using
tooltip with css on page.
JQuery Related other Post:
Create Simple Tooltip with jQuery:
Copy this code and past on head section of asp.net web page.
<link rel='stylesheet' href='css/tooltips.css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<style type="text/css">
.style1
{
color: #0000CC;
text-decoration: underline;
}
</style>
<script src="js/tooltips.js"></script>
<script>
$(function
() {
$("#page-wrap
a[title]").tooltips();
});
</script>
JQuery change the style of tooltip in asp.net using css:
Create a tooltip.css
file ,copy fallowing code and past in tooltip.css file.
.tooltip, .arrow:after {
background: black;
border: 2px solid white;
}
.tooltip {
pointer-events: none;
opacity: 0;
display: inline-block;
position: absolute;
padding: 10px 20px;
color: white;
border-radius: 20px;
margin-top: 20px;
text-align: center;
font: bold 14px "Helvetica
Neue", Sans-Serif;
font-stretch: condensed;
text-decoration: none;
text-transform: uppercase;
box-shadow: 0 0 7px black;
}
.arrow {
width: 70px;
height: 16px;
overflow: hidden;
position: absolute;
left: 50%;
margin-left: -35px;
bottom: -16px;
}
.arrow:after {
content: "";
position: absolute;
left: 20px;
top: -20px;
width: 25px;
height: 25px;
-webkit-box-shadow: 6px
5px 9px -9px black,
5px
6px 9px -9px black;
-moz-box-shadow: 6px 5px 9px -9px black,
5px 6px 9px -9px black;
box-shadow: 6px 5px 9px -9px black,
5px 6px 9px -9px black;
-webkit-transform: rotate(45deg);
-moz-transform:
rotate(45deg);
-ms-transform:
rotate(45deg);
-o-transform:
rotate(45deg);
}
.tooltip.active {
opacity: 1;
margin-top: 5px;
-webkit-transition: all
0.2s ease;
-moz-transition:
all 0.2s
ease;
-ms-transition:
all 0.2s
ease;
-o-transition:
all 0.2s
ease;
}
.tooltip.out {
opacity: 0;
margin-top: -20px;
}
jQuery Tooltip for ASP.Net with content web application:
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeFile="Default.aspx.cs"
Inherits="_Default"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>jqueryTooltips with CSS3 in asp.net</title>
<link rel='stylesheet' href='css/tooltips.css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<style type="text/css">
.style1
{
color: #0000CC;
text-decoration: underline;
}
</style>
<script src="js/tooltips.js"></script>
<script>
$(function
() {
$("#page-wrap
a[title]").tooltips();
});
</script>
</head>
<body bgcolor="#00ff99">
<div align="center"><h1
class="style1">Asp.net
Programming tutorial </h1>
</div>
<div align="center">
<h1 class="style1"><span>Tooltips</h1></div>
<div id="page-wrap"
align="center">
<p>Hello Friends, In this Tutorial blog we consider
many <a href="#" title="Asp.net introduction ">
asp.net</a>Related post. </p>
<p>in which we take some segment of code that help
you to improve the knowladge about
<a href="#" title="asp.net web
server controls.">asp.net server controls</a>
.</p>
</div>
</body>
</html>
Create Tooltip using JQuery in Asp.Net with Example
 |
| jquery tooltip with css |
good to read this blog really.
ReplyDeleteasp.net-development