Cut & Paste Inline HTML Tooltip script
|
Description: Inline HTML Tooltip lets you define rich HTML tooltips that are embedded directly inside your webpage and that appear when the mouse rolls over links on your page. The tooltip appears directly beneath the anchor link, and adjusts its position dynamically based on whether the mouse is too close to the window's edges.
Example (move mouse over links): "RSS is a popular format for pushing updated headlines and contents from a site to viewers. JavaScript can be used to show RSS content on your site, whether by hosting the feed yourself as seen in RSS Ajax Ticker, or through Google Feeds API, explained in the article Displaying RSS feeds easily using Google Ajax Feed API."
Directions:
Step 1: Insert the below into the <head> section of your page:
The code above references two external .js files. Download them below:
Step 2: Add the below sample HTML code to the BODY of your page:
More details
To add an inline HTML tooltip to any link on your page, just give the link a
rel="htmltooltip" declaration, then define the tooltip DIV itself
anywhere on the page with class="htmltooltip":
<a href="#" rel="htmltooltip">Some
link</a>
<!-- Matching tooltip with class="htmltooltip" -->
<div class="htmltooltip">RSS stands for Really
Simple Syndication, and is a type of XML file format.</div>
The tooltip DIV can be defined anywhere on the page, and not necessarily directly below the anchor link. So how does the script know which anchor the tooltip should belong to? It matches up the two based on the order in which they appear within the page's source, so the 4th tooltip DIV will be associated with the 4th anchor link on the page, wherever both may appear on the page.