Have you ever had trouble creating popup “tooltip” boxes? You’ve seen them, the ones that explain something about whatever it was you just clicked on. I recently added some to a project of mine, and had a tough time finding documentation on how to add multiple tooltips to the same page. Hopefully this post serves as a reference for someone else looking to do the same!

jQuery Library

I knew this was a simple javascipt task, but I needed an example to riff off. All the examples I found were muddy and generally unhelpful. Then, I discovered that the jQuery library already has this functionality built-in! The jQuery documentation even has a demo page that kind of explains what I was going for.

Unfortunately, the demo page wasn’t comprehensive. It gave me examples of form completion type boxes, and boxes that expanded by default, but I wanted a clickable image that would pop up a tooltip.

Coding the tooltip HTML

The first step is ensuring that the appropriate libraries and supporting files are being loaded into the header of your page. That includes jQuery, the jQuery UI, and the accompanying css. If you’re using a CMS such as WordPress or Joomla, they have their own ways of loading these scripts. First, use this example on a simple test page to understand the mechanics. Then, transfer the appropriate code to the live version of your website when you’re ready.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

Before crafting any javascript, I want to establish the actual html structure. The links themselves are standard a href tags that link to nothing (#). Each tag includes a unique id, and a class that lumps all them together for css purposes. Notice that all id below have numerical endings. This is by design, as the javascript will ultimately use this number to associate the clicked link with the popbox it’s supposed to open!

<a href="#" id="linkID1" class="popbox_link"><img src="/tooltip.jpg" /></a>
<a href="#" id="linkID2" class="popbox_link"><img src="/tooltip.jpg" /></a>
<a href="#" id="linkID3" class="popbox_link"><img src="/tooltip.jpg" /></a>

Next, the popboxes are crafted. These are div elements that are identified similarly to the tags. One convenient thing about this method is that since the javascipt controls when and where these divs pop up on the screen, it doesn’t matter where the divs are inserted in your code. I personally found it easier to clump all my popbox divs together toward the end of my code.

<div id="popboxID1" class="popbox" title="Just Like This">Looks like it should be pretty simple, right? Right.</div>
<div id="popboxID2" class="popbox" title="A Clickable Image">Very <b>similar</b> to what I’m demo’ing here. Actually, it’s exactly what I’m demo’ing here!</div>
<div id="popboxID3" class="popbox" title="I’m not sure about This">I’m actually not sure if I’m using the term <i>triggers</i> correctly here.</div>

Coding the tooltip jQuery

Lastly, the javascript needs to be put together. That begins with tying in the popbox class to the jQuery dialog function.

$(".popbox").dialog({
autoOpen: false,
show: ‘fade’,
hide: ‘fade’,
modal: false,
width: 400
});

The code above defines the visibility behavior of the divs, but code is needed to tie specific tooltip links to specific divs. Once again, we’re using the class we previously established (popbox_link in this case) and extracting the numerical identifier off of the link id. That id number is then concatenated to the popboxID. The positionDialog function is called.

$(".popbox_link").click(function(e) {
e.preventDefault();
var idPrefix = ‘linkID’;
var helpBtnNum = $(this).attr(‘id’).substring((idPrefix.length));
var selector = "#popboxID" + helpBtnNum;
var linkID = ‘#’ + $(this).attr(‘id’)

$(selector).dialog("open");
positionDialog(selector,linkID);
return false;
});

We could forego using the positionDialog function, but in doing so, every popbox will open in the middle of the screen. That’s appropriate for a warning dialog, but doesn’t really work for this purpose. We need to locate the box in close proximity to the link that opened it.

This function is self explanatory, but it establishes where the link is located on the screen. It then opens the opens the tooltip and offsets it slightly under the link.

function positionDialog(selector,linkID) {
            linkOffset = $(linkID).position();
            linkWidth = $(linkID).width();
            linkHeight = $(linkID).height();
            scrolltop = $(window).scrollTop();
            $(selector).dialog("option", "position", [linkOffset.left + linkWidth/2, linkOffset.top + linkHeight - scrolltop]);
        }

Lastly, a couple lines need to be added to the script to make sure the code triggers.

To wrap this up, here’s the full script.

$(function() {
        $(".popbox").dialog({
            autoOpen: false,
            show: 'fade',
            hide: 'fade',
            modal: false,
            width: 400
            });

        $(".popbox_link").click(function(e) {
            e.preventDefault();
            var idPrefix = 'linkID';
            var helpBtnNum = $(this).attr('id').substring((idPrefix.length));
            var selector = "#popboxID" + helpBtnNum;
            var linkID = '#' + $(this).attr('id')

            $(selector).dialog("open");
            positionDialog(selector,linkID);
            return false;
            });

        function positionDialog(selector,linkID) {
            linkOffset = $(linkID).position();
            linkWidth = $(linkID).width();
            linkHeight = $(linkID).height();
            scrolltop = $(window).scrollTop();
            $(selector).dialog("option", "position", [linkOffset.left + linkWidth/2, linkOffset.top + linkHeight - scrolltop]);
        }

        $(window).resize(function() {
            positionDialog();
        });

        $(window).scroll(function() {
            positionDialog();
        });
    });