Cybercrux

Everything is achievable through technology

Tooltip

<style type=”text/css”>

/* HOVER STYLES */
div#pop-up
{
display: none;
position: absolute;
width: 280px;
padding: 10px;
background: #eeeeee;
color: #000000;
border: 1px solid #1a1a1a;
font-size: 90%;
}
</style>

<script type=”text/javascript”>
$(function () {
var moveLeft = 20;
var moveDown = 10;

$(‘a#trigger’).hover(function (e) {
$(‘div#pop-up’).show().css(‘top’, e.pageY + moveDown).css(‘left’, e.pageX + moveLeft).appendTo(‘body’);
}, function () {
$(‘div#pop-up’).hide();
});

$(‘a#trigger’).mousemove(function (e) {
$(“div#pop-up”).css(‘top’, e.pageY + moveDown).css(‘left’, e.pageX + moveLeft);
});

});
</script>
<div id=”container”>
<h1>
jQuery Tutorial – Pop-up div on hover</h1>
<p>
To show hidden div, simply hover your mouse over <a href=”#” id=”trigger”>this link</a>.
</p>
<!– HIDDEN / POP-UP DIV –>
<div id=”pop-up”>
<h3>
Pop-up div Successfully Displayed</h3>
<p>
This div only appears when the trigger link is hovered over. Otherwise it is hidden
from view.
</p>
</div>
</div>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s