Difference between revisions of "Media Tooltip"
(updated for TNG V11) |
(updated for TNG V11) |
||
Line 3: | Line 3: | ||
| mod_summary = Integrates the Dynamic Drive Tooltip as a replacement for the standard browser-generated tooltip | | mod_summary = Integrates the Dynamic Drive Tooltip as a replacement for the standard browser-generated tooltip | ||
| mod_validation = Latest versions are XHTML compliant.[[Image:Valid-xhtml10.png|44px]] | | mod_validation = Latest versions are XHTML compliant.[[Image:Valid-xhtml10.png|44px]] | ||
− | | download_link = [http://www.royandboucher.com/ccount/click.php?id=218 media-4_tooltip_v10.1.0.1.zip]<br />for {{Tv1010}}<hr />[http://www.royandboucher.com/ccount/click.php?id=170 media-4_tooltip_v10.0.0.0.zip]<br />for {{Tv100}}<hr />[http://www.royandboucher.com/ccount/click.php?id=124 media-4_tooltip_v9.2.2.3.zip]<br />for {{Tv922}}<hr />[http://www.royandboucher.com/ccount/click.php?id=22 media-4_tooltip_v9.0.3.2.zip]<br />for {{Tv903}}<hr />[http://www.royandboucher.com/ccount/click.php?id=23 media-4_tooltip_v9.0.2.1.zip]<br />for {{Tv902}}<hr />[http://www.royandboucher.com/ccount/click.php?id=24 media-4_tooltip_v9.0.0.0.zip]<br />for {{Tv90}}<hr />[http://www.royandboucher.com/ccount/click.php?id=25 media-4_tooltip_v8.1.4.zip]<br />for {{Tv812}}<hr />[http://www.royandboucher.com/ccount/click.php?id=26 media-4_tooltip_v8.1.3.zip]<br />for {{Tv81}}<hr />[http://www.royandboucher.com/ccount/click.php?id=27 media-4_tooltip_v8.1.1.zip]<br />for {{Tv80}}<hr />for {{Tv70}}<br />* [http://www.royandboucher.com/ccount/click.php?id=28 media-4_tooltip_v1.2.zip] if you are '''NOT''' using Bret Rumsey's Image Viewer<br />* [http://www.royandboucher.com/ccount/click.php?id=29 media-4_tooltip_w_viewer_v2.1a.zip] if you '''ARE''' using Bret Rumsey's Image Viewer | + | | download_link = <span class="nowrap">[http://www.royandboucher.com/ccount/click.php?id=218 media-4_tooltip_v10.1.0.1.zip]</span><br />for {{Tv110}}{{Tv1010}}<hr /><span class="nowrap">[http://www.royandboucher.com/ccount/click.php?id=170 media-4_tooltip_v10.0.0.0.zip]</span><br />for {{Tv100}}<hr />[http://www.royandboucher.com/ccount/click.php?id=124 media-4_tooltip_v9.2.2.3.zip]<br />for {{Tv922}}<hr /><span class="nowrap">[http://www.royandboucher.com/ccount/click.php?id=22 media-4_tooltip_v9.0.3.2.zip]</span><br />for {{Tv903}}<hr />[http://www.royandboucher.com/ccount/click.php?id=23 media-4_tooltip_v9.0.2.1.zip]<br />for {{Tv902}}<hr />[http://www.royandboucher.com/ccount/click.php?id=24 media-4_tooltip_v9.0.0.0.zip]<br />for {{Tv90}}<hr />[http://www.royandboucher.com/ccount/click.php?id=25 media-4_tooltip_v8.1.4.zip]<br />for {{Tv812}}<hr />[http://www.royandboucher.com/ccount/click.php?id=26 media-4_tooltip_v8.1.3.zip]<br />for {{Tv81}}<hr />[http://www.royandboucher.com/ccount/click.php?id=27 media-4_tooltip_v8.1.1.zip]<br />for {{Tv80}}<hr />for {{Tv70}}<br />* [http://www.royandboucher.com/ccount/click.php?id=28 media-4_tooltip_v1.2.zip] if you are '''NOT''' using Bret Rumsey's Image Viewer<br />* [http://www.royandboucher.com/ccount/click.php?id=29 media-4_tooltip_w_viewer_v2.1a.zip] if you '''ARE''' using Bret Rumsey's Image Viewer |
| download_stats = View download statistics<br />[http://www.royandboucher.com/ccount/index.php?action=stats&id=22-23-24-124-170-218 for Tooltip mod]<br />[http://www.royandboucher.com/ccount/index.php?action=stats&groupid=3 for Media mods group] | | download_stats = View download statistics<br />[http://www.royandboucher.com/ccount/index.php?action=stats&id=22-23-24-124-170-218 for Tooltip mod]<br />[http://www.royandboucher.com/ccount/index.php?action=stats&groupid=3 for Media mods group] | ||
| mod_author = Ken Roy | | mod_author = Ken Roy | ||
Line 9: | Line 9: | ||
| mod_support = [http://tng.community/ TNG Community Forums] | | mod_support = [http://tng.community/ TNG Community Forums] | ||
| mod_contact = [http://www.royandboucher.com/tng/mod_support.php Ken Roy] | | mod_contact = [http://www.royandboucher.com/tng/mod_support.php Ken Roy] | ||
− | | mod_version = 10.1.0.1 for TNG V10<br />10.0.0.0 for TNG V10<br />9.2.2.3 for TNG V9.2.2<br />9.0.3.2 for TNG V9.0.3<br />9.0.2.1 for TNG V9.0.2<br />9.0.0.0 for TNG V9 and 9.0.1<br />8.1.3a for TNG V8.1.2<br />8.1.2 for TNG V8.1<br />8.1.1 for TNG V8<br />1.2 if '''NOT''' using Bret Rumsey's<br />2.1 if your '''ARE''' using Bret Rumsey's [[Image Viewer Mod]] for TNG V7 | + | | mod_version = 10.1.0.1 for TNG V10.1<br />10.0.0.0 for TNG V10<br />9.2.2.3 for TNG V9.2.2<br />9.0.3.2 for TNG V9.0.3<br />9.0.2.1 for TNG V9.0.2<br />9.0.0.0 for TNG V9 and 9.0.1<br />8.1.3a for TNG V8.1.2<br />8.1.2 for TNG V8.1<br />8.1.1 for TNG V8<br />1.2 if '''NOT''' using Bret Rumsey's<br />2.1 if your '''ARE''' using Bret Rumsey's [[Image Viewer Mod]] for TNG V7 |
| min_TNG_ver = 7.0.0 | | min_TNG_ver = 7.0.0 | ||
| max_TNG_ver = 11+ | | max_TNG_ver = 11+ |
Revision as of 07:42, 18 March 2016
Tooltip Mod | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Summary | Integrates the Dynamic Drive Tooltip as a replacement for the standard browser-generated tooltip | |||||||||||
Validation | Latest versions are XHTML compliant. | |||||||||||
Mod Updated | {{{mod_last_update}}} | |||||||||||
Download link | media-4_tooltip_v10.1.0.1.zip for
media-4_tooltip_v10.0.0.0.zip for
media-4_tooltip_v9.2.2.3.zip for
media-4_tooltip_v9.0.3.2.zip for
media-4_tooltip_v9.0.2.1.zip for
media-4_tooltip_v9.0.0.0.zip for
media-4_tooltip_v8.1.4.zip for
media-4_tooltip_v8.1.3.zip for
media-4_tooltip_v8.1.1.zip for
for
* 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 | 10.1.0.1 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 | 11+ | |||||||||||
Files modified | ||||||||||||
Related Mods | Media - 1 - Image Viewer Mod (for TNG V7 only) Media - 2 - ShowTable Mod Media - 3 - Body Text for Translation obsolete in TNG V10 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
- 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 and above
TNG version: | ≥ 8.0 |
- Download the appropriate file for your TNG version from the download links in the mod summary area in the upper right.
- After downloading the appropriate config file, unzip it into your mods folder
- 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 |
- Download the media-4_tooltip_v1.2.zip if you are NOT using Bret Rumsey's Image Viewer
- Download the media-4_tooltip_w_viewer_v2.1a.zip if you ARE using Bret Rumsey's Image Viewer
- After downloading the appropriate config file, unzip it into the admin/mod_folder
- 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 |
---|---|---|
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
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. |
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. | 10.0.0.0/10.1.0.1 | 10.0.0/10.1.0 rc 1 | 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 |
... | ... | ... | ... | ... | ... |
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 for TNG V7 only
- Media - 2 - ShowTable Mod
- Media - 3 - Body Text for Translation
- Media - 4 - Tooltip Mod
- Media - 5 - Image Map Message Mod
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