Media Tooltip

From TNG_Wiki
Revision as of 15:58, 26 August 2011 by Pastormacomber (talk | contribs) (Add Macomberkin to User Site List)
Jump to navigation Jump to search
Tooltip Mod
Summary Integrates the Dynamic Drive Tooltip as a replacement for the standard browser-generated tooltip
Validation V8.1.3a is XHTML compliant.Valid-xhtml10.png on TNG 8.1.2
Mod Updated {{{mod_last_update}}}
Download link media-4_tooltip_v8.1.3b.zip for TNG V8.1.2
media-4_tooltip_v8.1.3.zip for TNG V8.1
media-4_tooltip_v8.1.1.zip for TNG V8
* media-4_tooltip_v1.2.zip if you are NOT using Bret Rumsey's Image Viewer for TNG V7 only
* media-4_tooltip_w_viewer_v2.1a.zip if you ARE using Bret Rumsey's Image Viewer for TNG V7
Download stats {{{download_stats}}}
Author(s) Ken Roy
Homepage Tooltip Mod (this page)
Mod Support TNG Forums
Contact Developer
Latest Mod 8.1.3a for TNG V8.1.2
8.1.2 for TNG V8.1
8.1.1 for TNG V8
1.2 if NOT using Bret Rumsey's
2.1 if your ARE using Bret Rumsey's Image Viewer Mod for TNG V7
Min TNG V 7.0.0
Max TNG V 8.1.2
Files modified
See TNG Modules Involved
Related Mods
Media - 1 - Image Viewer Mod (for TNG V7 only)
Media - 2 - ShowTable Mod
Media - 3 - Body Text for Translation
Media - 5 - Image Map Message Mod
Notes


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.

Requirements

  • Backup of the following TNG files
showmedia.php
mytngstyle.css
extensions/cooltooltip.php
ddrivetip.js
admin/selectutil.js

Revision History

Version Date Contents
v8.1.3b 3 June 2011 zip file updated to media-4_tooltip_v8.1.2a.zip to include the media-4_tooltip folder
v8.1.3a 8 May 2011 minor update of mod for change made in TNG 8.1.2 for XHTML compliance
v8.1.3 10 February 2011 update mod to be XHTML compliant provided showmedia.php and showmedialib.php are compliant
v8.1.2 6 January 2011 zip file updated to media-4_tooltip_v8.1.2a.zip to include the media-4_tooltip folder
v8.1.2 2 January 2011 updated to support mytngstyle.css coming from templates/templateN/css in TNG V8.1
v8.1.1 2 October 2010 Updated for make the Image Map edit fields display more information.
v8.1.0 24 May 2010 Updated for TNG V8
v1.2 2 December 2009 Fixed problem with config file incorrectly generating extensions/cooltooltip.php.

Changed Tooltip mod to apply to all media collections and include mod to admin/selectutil.js

V2.1a 26 October 2009 updated zip file to include the ddrivetip.js file
V1.1a 26 October 2009 updated zip file to include the ddrivetip.js file
v2.1 2 July 2009 config file for use with Image Viewer Mod updated to save ddrivetip.js in extensions directory
v1.1 2 July 2009 config file updated to save ddrivetip.js in extensions directory
v2.0 13 May 2009 original Mod Manager config file for use with Image Viewer Mod
v1.0 13 May 2009 original Mod Manager config file


Automated Install

For TNG V8

  1. Download the appropriate file for your TNG version from the download links in the mod summary area in the upper right.
  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

Title="xxxx"

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 alt="Elise Picard" onmouseout="hideddrivetip()" onmouseover="ddrivetip('Elise Picard','lightblue',120) " />
<area shape="circle" coords="245,261,63" nohref alt="Emmanuel Picard" onmouseout="hideddrivetip()" onmouseover="ddrivetip('Emmanuel Picard','lightgreen',120) " />
<area shape="circle" coords="395,278,50" href="getperson.php?personID=I309&tree=T0001" alt="Rose Roy" onmouseout="hideddrivetip()" onmouseover="ddrivetip('Rose Roy','lightblue',120) " />
<area shape="circle" coords="527,268,51" nohref  alt="Fred Cyr" 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 alt="Elise Picard" 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 left shows the resultant name popup when mousing over a photo with an image map that is now using the Cool Tooltip javascript.

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!

URL User Note Mod-Version/TNG-Version User-language
Our Roy and Boucher Family Ken Roy I use this TNG mod for my Census, Military Service Ribbons, Historical Maps, and Photos media types. V8.1.1/8.0.2
V8.1.3/TNG 8.1.1 test 		EN, FR
Western New York, New Brunswick and Minnesota Roots Steve Voght
Our Family Histories.org Bryan S. Larson V8.1.3/8.1.1 EN
MacomberKin Rev. Clinton Macomber Using on photos with multiple people. Has been a great help! V8.1.1/8.0.2
V8.1.3b/TNG 8.1.2 		EN
... ... ... ... ...


Related Mods

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

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

TNG Modules Involved

In TNG V8, the following TNG modules are updated:

  • showmedia.php
  • css/mytngstyle.css
  • admin_selectutil.js
  • admin_editmedia.php (for V8.1.1 and V8.1.2)

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
Retrieved from "https://tng.lythgoes.net/wiki/index.php?title=Media_Tooltip&oldid=14581"