Google+ Followers

Thursday, June 20, 2013

Showing Costomize ToolTip Without JQuery javaScript Or Showing ToopTip Using CSS And HTML

In This Post I will Show You How to Show Customise ToolTip Without USing Javascript or Jquery

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.floatL{
float:left;
}
.tphpRFSO
{
width:21px;
height:20px;
margin-left: 250px;
margin-top: 360px;
position:relative;
text-align:left;
font-family:tahoma;
}
.tphpRFSO .tooltip
{
width:232px;
display:none;
}
.tphpRFSO:hover .tooltip
{
width:232px;
padding:10px;
position:absolute;
z-index:30;
right:-62px;
bottom:10px;
display:block;
}

.tphpRFSO .tooltip-top
{
width:232px;
height:17px;
background: url(rfst-tt-top.png) no-repeat bottom;
}
.tphpRFSO .tooltip-middle
{
width:232px;
background: url(rfso-tt-middle.png) repeat-y;
}
.tphpRFSO .tooltip-middle .cnt
{
width:201px;
margin:0 13px;
}
.tphpRFSO .tooltip-bottom
{
width:232px;
height:37px;
background: url(rfso-tt-bottom.png) no-repeat;
}
.tphpRFSO .tooltipHd
{
width:100%;
font-size:12px;
font-weight:bold;
margin-bottom:10px;
}
.tphpRFSO .tooltip p
{
width:100%;
font-size:12px;
line-height:14px;
color:#333;
margin-bottom:10px;
}
</style>
</head>
<body>

<div class="tphpRFSO floatL">
<img src="rfsoEnquiry.png" alt="" />
<div class="tooltip floatL">
<div class="tooltip-top floatL"></div>
<div class="tooltip-middle floatL">
<div class="cnt">
<div class="tooltipHd floatL">RFSO – Request For Special Offer</div>
<p>We would love to Offer you Special Discount Offers. However, how much Discount we can offer

you varies depending on your specific requirement. </p>
<p>Send us an RFSO with details like no. of people and specific dates. Within 24 hrs
We will revert with a personalized Discount Offer as per your requirement. If you like the offer,

you can grab it by making the payment online, before the offer expires.</p>
<p>Go ahead, send us an RFSO.<br /> And see how Lucky YOU can get! </p>
</div>
</div>
<div class="tooltip-bottom floatL"></div>
</div>
</div>
</body>
</html>


No comments:

Post a Comment