Media Tooltip

From TNG_Wiki
(Redirected from Tooltip Mod)
Jump to navigation Jump to search
Restricted Downloads of Media Tooltip 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
Caution If you have trouble downloading with Google Chrome, Vivaldi, Brave or other Chromium based browser, try using a right-click and select Open in new Window, then F5, or use another browser such as Firefox Caution
Ambox notice.png In TNG 13 and later, this mod no longer supports creating the Tooltips in the Edit Media dialog. The v13 mod changes the image_map conversion program to only convert image maps associated with the photos collection so the mod can still be used with other collections even though it cannot generate the image map directly in TNG
TNG 13.0


Ambox notice.png In TNG 14, you can use the Image Tag capability to tag people who are not in your database. See Image Tags TNG v14
TNG 14.0


Media Tooltip
Summary Integrates the Dynamic Drive Tooltip as a replacement for the standard browser-generated tooltip
Validation
Mod Updated 9 Jan 2025
Download link For
TNG 15.0
media_tooltip_v15.0.0.6.zip
For
TNG 14.0
media_tooltip_v14.0.0.5.zip
For
TNG 13.0
media_tooltip_v13.0.0.4a.zip
For
TNG 12.0
TNG 11.0.2

media-4_tooltip_v11.0.2.3.zip
Supports renaming extensions folder
For
TNG 11.0
TNG 10.1.0

media-4_tooltip_v10.1.0.2.zip
Download stats View download statistics
for Media Tooltip
for Media mods group
Author(s) Ken Roy
Homepage Media Tooltip (This page)
Mod Support TNG Community Forums
Contact Developer TNG Community Forums
Latest Mod 14.0.0.5 for TNG 14+
13.0.0.4 for TNG 13+
11.0.2.3 for TNG V11.0.2
10.1.0.2 for TNG V10.1
Min TNG V 7.0.0
Max TNG V 15+
Files modified
See TNG Modules Involved
Related Mods
Media - 2 - ShowTable Mod
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.

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

  • A working TNG installation.
  • A backup of all affected files (see the list in the summary in the upper right corner of the page)
  • An installed current version of the Mod Manager.

Revision History

Mod Version TNG Version Date Contents
15.0.0.6 15.0 9 Jan 2005 updated for TNG v15.
14.0.0.5 14.0 10 Dec 2022 updated for TNG v14. Removed the code that updated the upgrade_convert_image_maps.php since it is no longer possible to change the TNG code because the module gets deleted as part of the upgrade.
14.0.0.5_b105 14.0 26 Oct 2022 updated for TNG v14. Note you must already have upgraded to TNG v13 and preserved your image maps then.
13.0.0.4a 13.0 19 Jul 2021 updated to add fileoptionals to the changes made to upgrade_convert_image_maps.php so that the mod will install on TNG 13+ full installs where the Convert Image Maps to Images Tags script does not exist.

Note if you already have the v13.0.0.4 version install you do not need to unintall it in order to install v13.0.0.4a. Just save the new version in your mods folder

13.0.0.4 13.0 07 Oct 2020 updated
  • for TNG v13 and
  • renamed from Tooltip Mod or Media Tooltip which was previously posted to the Mods for TNG v13
  • updates TNG v13 image map conversion script to only convert image maps for photos to [Image Tags]]
  • removes the install sequence with other media mods
  • allows manual update of the Image Map textarea, but image maps must be created outside of TNG using a program like Mapedit
11.0.2.3 11.0 18 Sep 2016 updated to use $extspath variable for extensions folder target to allow users to rename the extensions folder
10.1.0.2 10.1 21 Aug 2016 updated to use $extspath variable for extensions include
10.1.0.1 10.1 12 Jan 2015 updated for TNG V10.1.0 new Mod Manager syntax rules
10.0.0.0 10.0 05 Jan 2014 updated for TNG V10.0.0
9.2.2.3 9.2 09 Aug 2013 updated for TNG V9.2.2
9.0.3.2 9.0 17 Jun 2012 updated for TNG V9.0.3
9.0.2.1 9.0 04 Apr 2012 updated for TNG V9.0.2
9.0.0.0 9.0 02 Feb 2012 updated for TNG V9
8.1.4 8.1 19 Feb 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.
8.1.3b 8.1 03 Jun 2011 zip file updated to media-4_tooltip_v8.1.3b.zip to include the media-4_tooltip folder
8.1.3a 8.1 08 May 2011 minor update of mod for change made in TNG 8.1.2 for XHTML compliance
8.1.3 8.1 10 Feb 2011 update mod to be XHTML compliant provided showmedia.php and showmedialib.php are compliant
8.1.2 8.1 06 Jan 2011 zip file updated to media-4_tooltip_v8.1.2a.zip to include the media-4_tooltip folder
8.1.2 8.1 02 Jan 2011 updated to support mytngstyle.css coming from templates/templateN/css in TNG V8.1
8.1.1 8.1 02 Oct 2010 Updated for make the Image Map edit fields display more information.
8.1.0 8.1 24 May 2010 Updated for TNG V8
1.2 02 Dec 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

2.1a 26 Oct 2009 updated zip file to include the ddrivetip.js file
1.1a 26 Oct 2009 updated zip file to include the ddrivetip.js file
2.1 02 Jul 2009 config file for use with Image Viewer Mod updated to save ddrivetip.js in extensions directory
1.1 02 Jul 2009 config file updated to save ddrivetip.js in extensions directory
2.0 13 May 2009 original Mod Manager config file for use with Image Viewer Mod
1.0 13 May 2009 original Mod Manager config file

Conflicts and Issues

No known conflicts.

Installation

TNG version: ≥ 8.0
  1. Uninstall and delete previous version of this mod (if installed)
  2. Download the appropriate zip file as shown in the mod summary in the upper right corner of the page.
  3. Extract the file from the downloaded zip file into the mods folder or FTP the extracted file to your mods folder.
  4. Follow the normal automated installation for Mod Manager, as shown in the example Mod Manager - Installing Config Files to install the mod.


TNG version: ≤ 13.1.2
TNG version: ≥ 13.0.0

V13.0.0.4 of the Media Tooltip mod adds an updated Convert Image Maps button in the Mod Manager description after installing the mod so that you can continue to use the Media Tooltip mod for any media collection other than the TNG photos collection which will be converted to Image Tags.

If you convert the Image Maps to Image Tags as part of the upgrade to TNG v13 and decide that you preferred the Media Tooltip which allowed tooltips on persons who are not in your database in a group photo, you can follow the instructions in Reverting Image Tags back to Image Maps provide you have a backup of your image maps for those photos. This procedure was previous documented on the TNG Community Forum and TNG Community Forum


TNG version: ≥ 14.0

Because TNG v14 upgrade process now deletes the database update files as part of the upgrade process, it is no longer possible to convert the prevent the conversion of image maps for collections other than photos

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)

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!

In the event of a problem

Uninstalling the mod

If you want to completely Remove (uninstall) this mod and any tables if created, you should

  1. click the Uninstall button to uninstall the mod
  2. click the Delete button to delete the config file from the mods folder.

Upgrade

  • Uninstall and eventually Delete the current Mod.
  • Proceed as for an installation with the new Mod.

Visualization

The following screen captures show the changes made by the mod:

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

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

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. 15.0.0.6
TNG 15.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
R G Strong Family Genealogy Russell Strong Public Site 14.0.0.5 14.0.4 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 EN
OurLife Family History - McMullen Clan Sean Thompson Not a public site 11.0.2.3 11.1.0 EN
virtual website (MAMP) on own computer H.P. van Zanen Not a public site 11.0.2.3 11.1.0 EN
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 EN
Kielakowie.com Janusz Kielak Public site 14.0.0.5 14.0.1 PL, EN, DE
Retrieved from "https://tng.lythgoes.net/wiki/index.php?title=Media_Tooltip&oldid=93962"