Javascript

I am working on integrating a bubble like this on a site I am building for work so I figured I would share how it is done in case someone else wants to add one or play with it a bit. The original inspiration for this came from Panic’s Coda product site on their “Download” button.

In this case the project calls for a bubble to be shown over an image on the site describing what the image is, and what the action is. If this sounds pretty simple and straight forward well I will try to keep it that way. First do not try to over think it, this is really just a combination of a few effects and timing.

HTML Code:

First before the </head> tag you need to include jQuery


<script type='text/javascript' src='http://yoursite.com/path/to/jquery.js'>
</script>


Now somewhere in the body (really wherever you want the pop up tool tip to show add this code:


<div class="tip-container">
<img class="main-img" src="http://yoursite.com/path/to/img.jpg" />
<div class="popup-tip"> Put the content for the bubble here!</div>
</div>


To explain, the “tip-container” div is used to hold everything together, this is so that you can easily move things around and place it wherever you want in the page. I should also note the reason I am using classes to define this is so that you can have more than one on a given page and you will not have to code multiple styles.

The “main-img” class is the trigger for the effect.

And of course “popup-tip” is the container for anything you want to show in the tip box. This emans you can put any HTML markup you want in there and even style it however you like.

CSS Code:

Next we have the CSS for the block, thie only real goal here is to relatively position the popup and to hide it from initial view.


.tip-container {
position: relative;
}

.popup-tip {
position: absolute;
display: none;
}


There is really nothing more going on here. It is important to set the “popu-tip” display to be none, this is to hide it for those who fear scripts and have them disabled (of course it helps with those using screen readers as well).

JavaScript Code:


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

var hideDelayTimer = null;

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

var trigger = $('.main-img', this);
var popup = $('.popup-tip', 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-tip.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-tip.css('display', 'none');
});
}, hideDelay);
});
});
});