SIMPLE CSS-BASED POP-UP IMAGE TOOLTIP

OBJECTIVE: A basic pop-up image tooltip will be created by hiding and showing a div tag that has been styled and positioned
using the hover pseudo-class.

Download popuptooltip.zip

CREATE A BASIC LAYOUT

First let's write code for a basic unstyled layout by creating:

• An image link for the thumbnail so that it can be clicked to go somewhere else (optional)
• A paragraph for the tooltip description
• A heading for the image caption
  

 

NOTE: An optional alt tag was added and a border width was set to zero to remove the default blue border that is associated with an image link.
Also the href attribute was set to "#".   If you need to have it link to a url change it to a relative or absolute link (i.e., href="mynewpage.html").

STYLE CONTAINERS

Style the following element containers:

• Image div container by giving it a 100px width, 1px blue border and 5px padding
• Tooltip and caption text by giving them both a font-size of .8em, Arial and margin of zero
• Tooltip container by giving the paragraph a 90px width, 1px black border, .3em padding and a background-color of #FF6

POSITION TOOLTIP

Position the tooltip on the right side of the image by setting:

• the image container position to relative
• the paragraph container to absolute with top/left coordinates

This will take the tooltip out of the normal flow of the document and position it absolutely but relative to its parent container.

NOTE: Changes in existing code highlighted in bold

HIDE/SHOW TOOLTIP

Hide and show tooltip container by setting the display property and the hover pseudo-class

• First, hide the tooltip container by setting the tooltip initial display visibility to none 
• Show tooltip container by setting display property to block for both the image_container and the tooltip container.

Must preview in a browser to see how tooltip works: If the mouse hovers over the image_container, then display the tooltip.
Also, if the mouse hovers over the tooltip once it has been displayed by hovering over the image then continue to display it.

HIGHLIGHT IMAGE ON ROLLOVER (OPTIONAL)

Create a image highlight when cursor is over it by:

• creating a 1 px red border around image to create a hightlight
• adusting padding to compensate for border thickness while also adding a simply special effect by reducing image size.

Must preview in a browser to see how tooltip works: When the mouse is hovered over the image a 1 pixel red border will
be displayed and the image will getting smaller. When the mouse is not over the image, border will be removed and image will return to original size.

NOTE: If you do not want the image to "animate", change the border property from 0 to 1 in the second <p> tag and delete the height and
width properties in the css rule: img:hover.

REAL WORLD EXAMPLE

IMPORTANT NOTE: To use the tool tip in a real world example using multiple images:

1. Edit all selectors by adding a class to make it more specific (updates highlighted in bold):
   NOTE: By adding .photo_gallery to each selector, they become more specific.  In other words, we are targeting not any div, p or h2 tag,
   but only ones that are inside a div with a class name of  photo_gallery.
   NOTE: Border is set to zero to remove default blue image link border (div.photo_gallery img {border:0;})
2. Apply that class to each div container for each div container (updates highlighted in bold):
   <div class="photo_gallery">
       <a href="#"><a href="#"><img src="images/debra_samson.jpg" width="100" height="100" /></a></a>
       <p>Tooltip info goes here...Tooltip info goes here...Tooltip info goes here...</p>
       <h2>Image Caption</h2>
   </div>
   
3. TIP: After completing one example, copy and paste ONE div container on the page to another location and change the reference
   for the images, tooltip and close caption.

 

FIX IE BUG (OPTIONAL) -- will add later

If a viewer is using an older version of Internet Explorer...