Popup window with information on mouse over hyperlink - php

Question

I want to display contact info with the link to contact us page on mouse over hyperlink just like stackoverflow (mouse over user name) and gmail (click over user name). The below is what the latest updated code looks like.
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/start/jquery-ui.css" />
<script>
$('#open').mouseenter(function() {
$('#dialog_content').dialog('open');
});
$('#dialog_content').mouseleave(function() {
$('#dialog_content').dialog('close');
});
var posX = $('#open').offset().left;
var posY = $('#open').offset().top;
console.log(posX,posY);
$('#dialog_content').dialog({
autoOpen: false,
open: function() {
closedialog = 1;
$(document).bind('click', overlayclickclose);
},
focus: function() {
closedialog = 0;
},
close: function() {
$(document).unbind('click');
},
buttons: {
/*
Ok: function() {
$(this).dialog('close');
}
*/
},
show: {
effect: 'fade',
duration: 800
},
hide: {
effect: 'fade',
duration: 800
},
position: [posX,posY+25],
resizable: false
});
</script>
<style>
.ui-dialog-titlebar {display:none;}
#other_content {width:200px; height:200px;background-color:grey;}
#dialog_content{display:none;}
</style>
<div id="dialog_content">bla bla bla</div>
<div id="open">CONTACT US</div>
The error that i get
Uncaught TypeError: Cannot read property 'left' of undefined

Answer 1

Check this option:
jsfiddle.net/3mxGM/4/
It creates a jQuery modal window with the info inside the div with id dialog_content. You might want dynamic content inside that div from your database or something. Anyway this should work for what you want.
html:
<div id="dialog_content">
Here you can write the info to show up in the modal window.<br /><br />
If you know what AJAX is, could be a good idea to use it to query your database and get the info from there.</div>
Open dialog
jQuery:
$(document).ready(function(){
$('#open').mouseenter(function() {
$('#dialog_content').dialog('open');
});
$('#dialog_content').mouseleave(function() {
$('#dialog_content').dialog('close');
});
var posX = $('#open').offset().left;
var posY = $('#open').offset().top;
$('#dialog_content').dialog({
autoOpen: false,
focus: function() {
closedialog = 0;
},
close: function() {
$(document).unbind('click');
},
buttons: {
/*
Ok: function() {
$(this).dialog('close');
}
*/
},
show: {
effect: 'fade',
duration: 800
},
hide: {
effect: 'fade',
duration: 800
},
position: [posX,posY+25],
resizable: false
});
});
css:
.ui-dialog-titlebar {display:none;}

Answer 2

If you're looking for a much more code-simple popup tooltip, I am enjoying a customized version of this:
http://devseo.co.uk/examples/pure-css-tooltips/#
If this is too fancy for you it was just some css3 transitions on top of this more basic version, explained well here:
http://sixrevisions.com/css/css-only-tooltips/