Popup window for giving information about products

Question

I wish to have a question mark beside the important options of my website, so that I can show the users information about that option right there in a small popup window.

I wish to have a popup window like this. Click on the Set Reminder option to see the popup. Can anyone guide me how they have made this or what have they used, for this nice little popup box.

Thanks :)

Answer 1

<script>
function showpopup(id) {
d = document.createElement('div');
d.style.position = 'absolute';
d.style.height = '100px';
d.style.width = '100px';
d.innerHTML = '<p>Testing...</p>';
d.setAttribute('style', d.getAttribute('style') + 'background-color: blue;');
d.style.top = '' + (document.getElementById(id).style.top - 100);
d.style.left = '' + (document.getElementById(id).style.left - 50);
document.body.appendChild(d);
}
</script>
<a href='#' id='l1' onclick='showpopup("l1");'>aalsdkfj</a>

Answer 2

You can call it a tooltip. There are tons of tools which can help you achieve that effect. Depending on your preferred javascript framework, you can find many plugins. Here are a few for the jQuery framework.

http://flowplayer.org/tools/tooltip/index.html

http://plugins.learningjquery.com/cluetip/demo/

http://craigsworks.com/projects/qtip/demos/

If you want more, you can google "jQuery tooltips".

P.S: If you want the tooltips to appear on a "click" event, play around with the javascript file of the tooltip you select.

Answer 3

There are lots of tools you could use, including a hundred modal dialogs for jQuery. If you want a comprehensive solution that doesn't depend on a CSS framework, take a look at Floatbox. It's relatively slim, easy to work with and support is great.