Tooltip Mod

From TNG Wiki

Introduction

This modification provides dynamic tooltips (pop-up information boxes) using the Cool DHTML Tooltip from Dynamic Drive. Instead of the standard browser-generated tooltip (displayed via the title= parameter), the dynamic tooltip is displayed when scrolling the mouse over the image. For an example of this modification in action, see this photo, and scroll the mouse over various individuals in the picture. Further examples and additional sites using this modification are included at the end.

Dynamic tooltips have several advantages:

• Tooltips can be sized to different widths, styled with HTML code, and wrapped onto additional lines (see Customizing Tooltips.)
• The generated tooltip can also be used to display names of persons who are not in your genealogy database by editing the TNG generated area map (See Customizing Tooltips for more details.)
• The modified tooltip displays much more rapidly than a browser-generated tooltip, and continues to display itself and follow the mouse around until you move off the image.
• The modified tooltip intelligently detects the edges of the browser window, always displaying itself in full view of the user.

Developer

This mod was developed for TNG by Ken Roy as an custom application of the Dynamic Drive Cool DHTML Tooltip.

Ken initially developed it to display additional information for his Military Ribbons and Historical Maps media collections when mousing over the image. Later he discovered that he could also use it for photos to replace the browser generated tooltip code, resulting in faster display of the data.

Revision History

Requirements

• Backup of the following TNG files

showmedia.php
mytngstyle.css
extensions/cooltooltip.php
ddrivetip.js
admin/selectutil.js

• An installed current version of the Mod Manager.

Automated Install

For TNG V8

1. Download the media-4_tooltip_tng8_v3.2.zip
2. After downloading the appropriate config file, unzip it into your mods folder
3. Follow the normal automated installation for Mod Manager, as shown in the example Mod Manager - Installing Config Files.

For TNG V7

1. Download the media-4_tooltip_v1.2.zip if you are NOT using Bret Rumsey's Image Viewer
2. Download the media-4_tooltip_w_viewer_v2.1a.zip if you ARE using Bret Rumsey's Image Viewer
3. After downloading the appropriate config file, unzip it into the admin/mod_folder
4. Follow the normal automated installation for Mod Manager, as shown in the example Mod Manager - Installing Config Files.

Note that the media-4_tooltip_v1.1.cfg or media-4_tooltip_w_viewer_v2.1.cfg file is part of a series of media display mods where the n in media-n designates the install order of the mods. If you use Bret Rumsey's Image Viewer it must be installed first. Also if you are using the ShowTable Mod and Body Text for Translation they must be installed before this mod.

Updated the zipfiles to V1.1a and V2.1a to include the required ddrivetip.js file --Ken Roy 23:25, 26 October 2009 (UTC)

How to Replace Photo Tooltips

All tooltip code is located within the Image Map section of each media editing page (the same page that you assign media links.) Generate your image maps the same as before, and then modify the resulting code.

Replacing old-style image map tooltips

This section applies to any image maps you created before installing this mod, and also applies to any new image maps if you have not made the optional revision to selectutil.js.

To replace the standard TNG generated tooltips for image maps, you need to replace the

Alt="xxxx" Title="

with

onmouseout="hideddrivetip()" onmouseover="ddrivetip('

and then replacing the ending quote after the person's name

" with

','lightgreen')

or any other basic color of your preference; e.g. 'lightblue', 'lavender', etc. These colors can be different for each individual within an image map. Valid color names are shown here.

You can also shorten the width of the popup box, by changing the ending quote to

','lightgreen',120)

where 120 is the width of the box in pixels.

The changed area map statement then look as follows:

<area shape="circle" coords="112,279,68" nohref onmouseout="hideddrivetip()" 
onmouseover="ddrivetip('Elise Picard','lightblue',120) " />
<area shape="circle" coords="245,261,63" nohref onmouseout="hideddrivetip()" 
onmouseover="ddrivetip('Emmanuel Picard','lightgreen',120) " />
<area shape="circle" coords="395,278,50" 
href="getperson.php?personID=I309&tree=T0001" onmouseout="hideddrivetip()" 
onmouseover="ddrivetip('Rose Roy','lightblue',120) " />
<area shape="circle" coords="527,268,51" nohref onmouseout="hideddrivetip()" 
onmouseover="ddrivetip('Fred Cyr','lightgreen',120) " />

IMPORTANT NOTE: If an individual's name contains an apostrophe, you need to protect it with a backslash (e.g. "ddrivetip('Scarlett O\'Hara','lightgreen','120')" )

Customizing Tooltips

Custom background color

Background color can be specified for each area within the image map, and can be unique for each area. In the example above, individual tooltips alternate between lightgreen and lightblue. If you have made the revision to selectutil.js, all areas default to lightgreen, but this can be customized by editing the resulting image map.

People that aren't in your tree

First, create a tooltip for the individual and enter any valid personID. Then remove the href="getperson.php?personID=I123&tree=Tree" snippet of the resulting code and add "nohref" in its place. (See the first two people in the sample code in the section above for examples of this.)

The same trick can be used to identify inanimate objects or other interesting features within an image.

Multiple lines and styles

The tooltip will display any valid basic HTML code you enter into the first section of ddrivetip(). For example, you might want to provide an additional piece of information on people who aren't in your tree, such as their association with the others in the picture.

Example:

<area shape="circle" coords="112,279,68" nohref onmouseout="hideddrivetip()" 
onmouseover="ddrivetip('Elise Picard<br /><em>(Rose\'s neighbor)</em>','lightblue',120) " />

This will display the person's name, with her connection as a neighbor (in italics) on the next line. Again, remember to protect any apostrophes with a backslash!

Examples

Resultant Name Popup

The image on the right shows the resultant military ribbon popup when mousing over a military ribbon rack created by UltimateRack with an image map that is now using the Cool Tooltip javascript, and has multiple lines and HTML styling.

Military Ribbon Popup

Sites using this mod

Please add TNG site that you have found that utilize this modification!

• Our Acadian, French Canadian, and Maine Ancestors I use this TNG mod for my Military Service Ribbons, Historical Maps, and Photos media types. (Ken Roy)
• Western New York, New Brunswick and Minnesota Roots (Steve Voght)

Related Mods

The following Media mods may be related. The number indicates the install order if you install more than one of these mods:

• Media - 1 - Image Viewer Mod
• Media - 2 - ShowTable Mod
• Media - 3 - Body Text for Translation
• Media - 4 - Tooltip Mod
• Media - 5 - Image Map Message Mod

IMPORTANT NOTE: If you are using the Image Viewer Mod with this mod, you need to make one additional revision to the img_viewer.php file that comes as part of that mod. Between the third-last and second-last lines of that file, insert the following line of code (on line 82, between the line that reads </script> and the line that reads </body>):

<?php @include($cms[tngpath] . "extensions/cooltooltip.php");   // Ken Roy's Dynamic Drive Cool Tooltip mod ?>

See Automated Install section for the config files to be used with Brian McFadyen's Mod Manager to install this mod with or without the Image Viewer Mod.

Other Related Links

• Media Types - Military Ribbons
• Media - Add New
• Mapedit

TNG Modules Involved

In TNG V8, the following TNG modules are updated:

• showmedia.php
• css/mytngstyle.css
• admin_selectutil.js

and the following modules are added:

• extensions/cooltooltip.php
• js/ddrivetip.js

In TNG V7, the following TNG Modules are updated:

• showmedia.php
• mytngstyle.css
• admin/selectutil.js

and the following modules are added:

• extensions/cooltooltip.php
• ddrivetip.js<