On Mouse over effect using jquery [Resolved]

Posted by Nagukothapalli under jQuery on 11/7/2012 | Points: 10 | Views : 1774 | Status : [Member] | Replies : 2
hi all,
i want to show some details using jquery as a tool tip can any one share code please




Responses

Posted by: Saratvaddilli on: 11/8/2012 [Member] [MVP] Bronze | Points: 50

Up
0
Down

Resolved
sample code we have number of plugins to do this , this is one sample code
Html
<div class="bubbleInfo">

<img class="trigger" src="http://mysite.com/path/to/image.png" />
<div class="popup">
<!-- your information content -->
</div>
</div>

CSS
.bubbleInfo {

position: relative;
}

.popup {
position: absolute;
display: none; /* keeps the popup hidden if no JS available */
}


Sample code
$(function () {

$('.bubbleInfo').each(function () {
// options
var distance = 10;
var time = 250;
var hideDelay = 500;

var hideDelayTimer = null;

// tracker
var beingShown = false;
var shown = false;

var trigger = $('.trigger', this);
var popup = $('.popup', this).css('opacity', 0);

// set the mouseover and mouseout on both element
$([trigger.get(0), popup.get(0)]).mouseover(function () {
// stops the hide event if we move from the trigger to the popup element
if (hideDelayTimer) clearTimeout(hideDelayTimer);

// don't trigger the animation again if we're being shown, or already visible
if (beingShown || shown) {
return;
} else {
beingShown = true;

// reset position of popup box
popup.css({
top: -100,
left: -33,
display: 'block' // brings the popup back in to view
})

// (we're using chaining on the popup) now animate it's opacity and position
.animate({
top: '-=' + distance + 'px',
opacity: 1
}, time, 'swing', function() {
// once the animation is complete, set the tracker variables
beingShown = false;
shown = true;
});
}
}).mouseout(function () {
// reset the timer if we get fired again - avoids double animations
if (hideDelayTimer) clearTimeout(hideDelayTimer);

// store the timer so that it can be cleared in the mouseover if required
hideDelayTimer = setTimeout(function () {
hideDelayTimer = null;
popup.animate({
top: '-=' + distance + 'px',
opacity: 0
}, time, 'swing', function () {
// once the animate is complete, set the tracker variables
shown = false;
// hide the popup entirely after the effect (opacity alone doesn't do the job)
popup.css('display', 'none');
});
}, hideDelay);
});
});
});


Thanks and Regards
V.SaratChand
Show difficulties that how difficult you are

Nagukothapalli, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Vinay13mar on: 11/9/2012 [Member] Starter | Points: 25

Up
0
Down

Login to post response