Tooltip Mod

From TNG_Wiki
(Redirected from Media - 4 - Tooltip Mod)
Jump to: navigation, search
Restricted Downloads of Tooltip Mod are restricted to logged in users. If you do not have a user account on the TNG Wiki use the Request Account link to request a user account Restricted


Tooltip Mod
Summary Integrates the Dynamic Drive Tooltip as a replacement for the standard browser-generated tooltip
Validation Latest versions are XHTML compliant.Valid-xhtml10.png
Mod Updated 18 Sep 2016
Download link for
TNG 12.0
TNG 11.0.2
media-4_tooltip_v11.0.2.3.zip
supports renaming extensions folder
media-4_tooltip_v10.1.0.2.zip
for
TNG 11.0
TNG 10.1.0

media-4_tooltip_v10.0.0.0.zip
for
TNG 10.0

media-4_tooltip_v9.2.2.3.zip
for
TNG 9.2.2

media-4_tooltip_v9.0.3.2.zip
for
TNG 9.0.3

media-4_tooltip_v9.0.2.1.zip
for
TNG 9.0.2

media-4_tooltip_v9.0.0.0.zip
for
TNG 9.0

media-4_tooltip_v8.1.4.zip
for
TNG 8.1.2

media-4_tooltip_v8.1.3.zip
for
TNG 8.1

media-4_tooltip_v8.1.1.zip
for
TNG 8.0

for
TNG 7.0

* media-4_tooltip_v1.2.zip if you are NOT using Bret Rumsey's Image Viewer
* media-4_tooltip_w_viewer_v2.1a.zip if you ARE using Bret Rumsey's Image Viewer
Download stats View download statistics
for Tooltip mod
for Media mods group
Author(s) Ken Roy
Homepage Tooltip Mod (this page)
Mod Support TNG Community Forums
Contact Developer Ken Roy
Latest Mod 11.0.2.3 for TNG V11.0.2
10.1.0.2 for TNG V10.1
10.0.0.0 for TNG V10
9.2.2.3 for TNG V9.2.2
9.0.3.2 for TNG V9.0.3
9.0.2.1 for TNG V9.0.2
9.0.0.0 for TNG V9 and 9.0.1
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 12+
Files modified
Related Mods
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.

Note that the title= was incorrectly added back into the generated Image Map when making the mod XHTML compliant by mod version 8.1.3. The title= generates the browser tooltip therefore you will need to manually remove the title= from Image Maps thate were incorrectly added, if you installed the media-3_body_text_V8.1.3a.cfg

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


Automated Install

For TNG V8 and above

TNG version: 8.0
  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

TNG version: 7.0
  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)

Revision History

Version Date Contents
v11.0.2.3 18 September 2016 updated to use $extspath variable for extensions folder target to allow users to rename the extensions folder
v10.1.0.2 21 August 2016 updated to use $extspath variable for extensions include
v10.1.0.1 12 January 2015 updated for TNG V10.1.0 new Mod Manager syntax rules
v10.0.0.0 5 January 2014 updated for TNG V10.0.0
v9.2.2.3 9 August 2013 updated for TNG V9.2.2.
v9.0.3.2 17 June 2012 updated for TNG V9.0.3.
v9.0.2.1 4 April 2012 updated for TNG V9.0.2.
v9.0.0.0 2 February 2012 updated for TNG V9.
v8.1.4 19 February 2012 updated to remove the title= incorrectly added for the XHTML compliant change. The title= generates the browser tooltip and needs to be removed from Image Maps were incorrectly added.
v8.1.3b 3 June 2011 zip file updated to media-4_tooltip_v8.1.3b.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

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

If you download and install this mod, please add your TNG site to the table below:

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. 11.0.2.3 12.0.0 EN, FR
Western New York, New Brunswick and Minnesota Roots Steve Voght
Our Family Histories.org Bryan S. Larson 9.0.3.2 9.0.3 EN
MacomberKin Rev. Clinton Macomber Using on photos with multiple people. Has been a great help! 9.0.3.2 9.0.3 EN
Hooley Family Links Rick Hooley Public Site 10.1.0.1 10.1.1 EN
R G Strong Family Genealogy Russell Strong Public Site 11.0.2.3 12.0.1 EN, FR, DE, NL
The Grahams of Helensburgh Jim Graham Public/Private 10.1.0.1 12.0 EN
Roebuck and Families Ancestry Website Donald Roebuck Public site except for Living 11.0.2.3 11.0.2 EN
Robison and Blythe Genealogy Jeff Robison Public site. Very nice mod. 11.0.2.3 11.0.2 English
OurLife Family History - McMullen Clan Sean Thompson Not a public site 11.0.2.3 11.1.0 English
virtual website (MAMP) on own computer H.P. van Zanen Not a public site 11.0.2.3 11.1.0 English
Stamboom Jongman Roel Jongman Public/Private site 10.1.0.2 10.1.3 NL, DE, EN
Bumbery-Wangler Bob Bumbery Public site 11.0.2.3 11.1.2 English

Related Mods

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

Other Related Links

TNG Modules Involved

TNG V8 and above

TNG version: 8.0

In TNG V8 and above, 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

TNG V7

TNG version: 7.0

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