Custom Tool Tip
Step 1: Insert the following css code in the <HEAD> section of your page
.bubbleInfo
{
float:left;
width:100%;
height:50px;
position:relative;
}
.red
{
background:#FF0000 !important;
}
.trigger {
position: absolute;
}
/* Bubble pop-up */
.popup {
position: absolute;
display: none;
z-index: 50;
border-collapse: collapse;
background:#0000FF;
width:250px;
height:200px;
left:350px !important;
top:0px !important;
}
.main-div
{
width:350px; height:800px; margin:0 auto; position:relative; background:#333333;
}
</style>
Step 1: Insert the following JS code in the <HEAD> section of your page
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(function () {
$('.bubbleInfo').each(function () {
var distance = 10;
var time = 250;
var hideDelay = 500;
var hideDelayTimer = null;
var beingShown = false;
var shown = false;
var trigger = $('.trigger', this);
var info = $('.popup', this).css('opacity', 0);
$([trigger.get(0), info.get(0)]).mouseover(function () {
if (hideDelayTimer) clearTimeout(hideDelayTimer);
if (beingShown || shown) {
// don't trigger the animation again
return;
} else {
// reset position of info box
beingShown = true;
info.css({
top: -90,
left: -33,
display: 'block'
}).animate({
top: '-=' + distance + 'px',
opacity: 1
}, time, 'swing', function() {
beingShown = false;
shown = true;
});
}
return false;
}).mouseout(function () {
if (hideDelayTimer) clearTimeout(hideDelayTimer);
hideDelayTimer = setTimeout(function () {
hideDelayTimer = null;
info.animate({
top: '-=' + distance + 'px',
opacity: 0
}, time, 'swing', function () {
shown = false;
info.css('display', 'none');
});
}, hideDelay);
return false;
});
});
});
//-->
</script>
Step 2: Insert the below sample code into the <BODY> section of your page:
<div class="main-div">
<div class="bubbleInfo">
<div class="trigger" id="download" style="background:#ccc; width:100%; height:50px;"></div>
<div class="popup">
Your Details
</div>
</div>
<div class="bubbleInfo">
<div class="trigger red" id="download" style="background:#ccc; width:100%; height:50px;"></div>
<div class="popup">
Your Details Two
</div>
</div>
</div>
Comments
Post a Comment