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.

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:

Find a Bug? Let me know.

If you've found what you believe to be a bug with the Tiny Tooltips script, please submit a Bug Report using the form on my Contact Us page.