Tiny Tooltips
The Tiny Tooltips widget is a lightweight, easy solution for implementing javascript tooltips on your website. Use Tiny Tooltips javascript widget to provide additional information about hyperlinks, or as a simple glossary to define special terms on your website.Tiny Tooltips Link Examples
Here is a link for you to play Tic Tac Toe against me.Also, I've included an example ttTermFixd tooltip for Splinter - the turtles' boss. Notice this tooltip stays put until closed, or until another Tiny Tooltips link is activated.
This non-Tiny-Tooltips link to my Random ID Generator will not affect the Tiny Tooltips at all.
Here is what it looks like if you forget to add a definition to the javascript array - The Missing Link.
Fast and Easy Installation
Simply include these two small javascript and css files (less than 7 KB total file size) on your html page, and add your own tooltip/glossary definition to the javascript.Step 1: Download the Tiny Tooltips Files
tinytooltips.js (5.85 KB) [download now]
tinytooltips.css (674 bytes) [download now]
Step 2: Edit the tinytooltips.js file
To set up the tooltips, you will define Glossary Items for your HTML page, one per line, in format shown below:
aryGlossary["Item Title (used within <a> tag as the id)"] = "Item Description (this can be HTML)";
NOTE: Each Item Title must be unique within the aryGlossary array, and will be used as the id in your <a> tag to identify this item.
Step 3: Edit your HTML
Add the following DIV tag within the body of your html:
<div class="ttGlossary" id="ttTip"></div>
NOTE: Without the above div tag, the Tiny Tooltips widget will not work!
Then, simply add an id and class to the appropriate <a> tag in your HTML using the format shown below:
<a id="Item 1" class="ttTerm" href=...> This is the standard tooltip, which is only visible while cursor hovers over the keyword(s).
<a id="Item 2" class="ttTermFixd" href=...> This will open a fixed tooltip that doesn't disappear on mouseout, but will disappear when another Tiny Tooltip is activated or the [close] link is clicked.
<a id="Item 2" class="ttTermFixd" href=...> This will open a fixed tooltip that doesn't disappear on mouseout, but will disappear when another Tiny Tooltip is activated or the [close] link is clicked.
NOTE: The id in the <a> tag must match the "Item Title" value from the array you created in the tinytooltips.js file, and the class is either "ttTerm" or "ttTermFixd" as indicated above.
Optional Step: Edit the tinytips.css file
There are only a handful of CSS styles comprising the Tiny Tooltips, which you can modify to achieve the perfect look and feel for your website.
Briefly, here are the styles:
- .ttGlossary - This is the tooltip that appears on mouseover and defines the font, colors, width, etc.
- .ttGlossary img.ttLeft - Special image class for floating image to the left, as used in Tic Tac Toe link example.
- .ttTitle - Defines the tooltip title appearance - font, color, etc.
- .ttDef - Defines the appearance of the tooltip definition (content).
- .ttTerm, .ttTermFixd - Defines the appearance of links which use the Tiny Tooltips classes.
