PageNote Balloon Tooltips

© 2013 Jim Williams, version of 8/8/2013
placement: below 3 target-block

Mouse over any head to see what the Beatles are singing in Sgt. Pepper's Lonely Hearts Club Band.

Sgt. Pepper's Lonely Hearts Club Band

Lend me your ears and I'll sing you a song,
And I'll try not to sing out of key.

Lucy in the sky with diamonds!

We're Sgt. Peppers Lonely hearts club band!

With our love -
    we could save the world -
    if they only knew.
Try to realise 
    it's all within yourself.

The following brief explanation shows how to construct page notes for image hot spots, and how to create balloon page notes, also known as bubble page notes. It assumes familiarity with the article Using PageNote Tooltips.

The tooltip targets in the above image are the areas in its image map. The map must have both an id and a name, as in this example. Each area has its own tooltip template represented as a class. [See]

   <img border="0" src="images/sgt_peppers_portrait.jpg" width="600" 
      height="400" usemap="#beatlesmap">
<map id="beatlesmap" name="beatlesmap"> <area anno="#Ringo" class="thought-ringo" shape="rect" coords="125, 83, 195, 156"> <area anno="#John" class="thought-john" shape="rect" coords="204, 83, 298, 176"> <area anno="#Paul" class="speech-paul" shape="rect" coords="292, 71, 397, 166"> <area anno="#George" class="thought-george" shape="rect" coords="397, 64, 600, 166"> </map>

The annotations are unremarkable. [See, for example, John's]

   <p class="hide" id="John">
      Lucy in the sky with diamonds!</p>

The skins are specially styled <div> elements. [See, for example, John's] The styles in these skins are given in the file bubbles.css. They are based on the work of Nicolas Gallagher. The key to these styles is to use the :before and :after pseudo elements to produce circles and triangles. Craig Buckler has a good introduction to this technique.

   <div id="thought-john" class="thought-bubble-john">

The placement specifications are unremarkable. [See, for example, John's] But they obey a couple of crucial implementation constraints: When the tooltip target is an area element, the only supported target containers are "cursor" and "target", and if the "target" target container is specified, the only supported shape is "rect".

   <div>placement: indent -50 above 10 target</div>
placement: indent -100 above 10 target

placement: indent -50 above 10 target

placement: indent -50 above 10 target

placement: indent -50 above 10 target


Post a comment



commentary: used to present source code
placement: below 2 target-line