Sticky Tooltip script
Description: This script adds a rich HTML tooltip to elements that's revealed when the mouse rolls over them, in which the tooltip follows the cursor around as it moves about within the element. The tooltip can be "stickied", or kept visible on the screen by right clicking on pressing "s" should the user wish to interact with some content within the tooltip, such as click a link inside it. The contents for each tooltip are simply defined as regular HTML on the page, making them very easy to define and customize. Throw in a subtle fade in effect, and you've got yourself a tooltip that can do more than just show extra information, but serve it as well!
Demos (move your mouse over, right click/ press "s" to sticky tooltip):
Step 1: Insert the following code into the <head> section of your page:
The above code references two external files which you should download below (right click, and select "Save As"):
- stickytooltip.js (a few variables at the top and very bottom inside file you may wish to customize)
- stickytooltip.css
Step 2: Insert the below sample tooltip markup code into the <body> section of your page:
Defining your tooltips
All tooltips on the page should be defined inside a single DIV, with each DIV itself wrapped around a DIV with a unique ID attribute. The basic structure is:
<div id="mystickytooltip"
class="stickytooltip">
<div style="padding:5px">
<div id="sticky1">
Sticky Tooptip 1 content here...
</div>
<div id="sticky2">
Sticky Tooptip 2 content here...
</div>
<div id="sticky3">
Sticky Tooptip 3 content here...
</div>
</div>
<div class="stickystatus"></div>
</div>
In this case I've defined 3 tooltips. Notice how all 3 are contained inside
the DIV with CSS class "stickytooltip
", which you should retain
(the CSS class that is). Each individual tooltip DIV plus the outermost
container should carry a unique but arbitrary ID attribute.
With your tooltip defined, you associate a particular tooltip with an element
on the page by inserting the attribute "data-tooltip=tooltipid
"
into the element, for example:
<a href="http://www.dynamicdrive.com" data-tooltip="sticky1">Dynamic Drive</a>
You set data-tooltip
to the ID of the tooltip you want this
element to show, in this case, sticky1
. You can insert this
attribute not just inside links, but any element on the page you wish a tooltip
to appear when the mouse rolls over it.
Modifying global settings
There are also some variables inside stickytooltip.js that affect your sticky tooltips in general that you may want to customize. Firstly, near the top of the file:
tooltipoffsets: [20, -30], //additional x and y offset
from mouse cursor for tooltips
fadeinspeed: 200, //duration of fade effect in milliseconds
rightclickstick: true, //sticky tooltip when user right clicks over the
triggering element (apart from pressing "s" key) ?
stickybordercolors: ["black", "darkred"], //border color of tooltip depending on
sticky state
stickynotice1: ["Press \"s\"", "or right click", "to sticky this box"],
//customize tooltip status message
stickynotice2: "Click outside this box to hide it", //customize tooltip status
message
These variables control things such as the offset of the tooltips from the mouse cursor, and whether each tooltip should be "stickied" when the right mouse button is clicked over the anchor element etc. More importantly, however, is the last line inside stickytooltip.js:
infotooltip.init("*[data-tooltip]", "mystickytooltip")
The 2nd parameter should be set to the ID of the DIV holding all your
tooltips, which by default is "mystickytooltip
". The 1st parameter
is reserved for advanced users only, and accepts a jQuery selector limiting the
elements the page that are parsed for potentially carrying a tooltip.