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