Example 1: The Basics
This is hotspot one using a div tag, it hooks up to tooltip one by refering it its id of example-1-tooltip-1.
This is hotspot two, again using a div tag as the hotspot. This time it demonstrates using multiple tooltips, showing you tooltip two, and also showing you tooltip one again.
Yes, you can use the same tooltip in multiple hotspots.
And a final example using a div and just a single tooltip again, something a little different this time.
Let's try something different... how about a table with cells as hotspots?
Cell 1 Tooltip 1 | Cell 2 Tooltip 2 | Cell 3 Tooltip 3 |
Cell 4 Tooltip 1, 2 & 3 | ||
Cell 5 Tooltip 1 & 2 | Cell 6 Tooltip 2 & 3 | Cell 7 Tooltip 1 & 3 |
HTML source
The above example is generated by the HTML below.
<h1>Example 1: The Basics</h1>
<div class="tooltip-hotspot redbox" sgtooltip:tooltip="example-1-tooltip-1">
<p>This is hotspot one using a div tag, it hooks up to tooltip one
by refering it its id of example-1-tooltip-1.</p>
</div>
This is the first hotspot, it looks like a normal div, except it has a tooltip-hotspot class to indicate it is a hotspot, this is in addition to its redbox class to style it as a highlighted red box.
Being a tooltip-hotspot it also needs to indicate what tooltip should show when the hotspot is active, to do this it has a sgtooltip:tooltip attribute containing the element id of the tooltip to show, in this case example-1-tooltip-1.
The list of tooltips is further down in the page, below this first group of hotspots, although they could be placed anywhere in the page you find convenient.
The funny syntax for sgtooltip:tooltip is an XHTML custom attribute in the sgtooltip namespace, this esnures that your XHTML still validates even with this new attribute, and also prevents clashes with other people's custom attributes.
<div class="tooltip-hotspot bluebox" sgtooltip:tooltip="example-1-tooltip-2 example-1-tooltip-1">
<p>This is hotspot two, again using a div tag as the hotspot. This time
it demonstrates using multiple tooltips, showing you tooltip two, and
also showing you tooltip one again.</p>
<p>Yes, you can use the same tooltip in multiple hotspots.</p>
</div>
Like the first hotspot (and all hotspots), this hotspot is marked using the tooltip-hotspot class, this time however the sgtooltip:tooltip attribute has a twist - it contains a space-seperated list of ids instead of a single id.
This causes a stack of tooltips to be displayed, in the order given within the attribute.
You can stack as many tooltips as you like, although you'll end up with some being off the screen if the stack ends up being taller than the entire height of the window. (sgTooltip.js does make valiant efforts to shift the stack around to keep as much as possible on-screen, but there's only so much it can do if you ask the impossible.)
<div class="tooltip-hotspot greenbox" sgtooltip:tooltip="example-1-tooltip-3">
<p>And a final example using a div and just a single tooltip again, something
a little different this time.</p>
</div>
This is the third and final hotspot in the first group of hotspots, there's nothing new here in the hotspot, although the tooltip itself has a little surprise.
<div style="display:none;">
This is a container div for the tooltips, it's styled so as not to display, so that the tooltips within it won't be seen within the document while they're 'idle'.
You don't have to hide the tooltips in this way if you don't want to, you could do it some other way, sgTooltip will find the tooltips by looking for any element with the tooltip class, it doesn't care whether they're in a particular location, or even if they're scattered through the entire document.
You don't even have to hide them, although you'll probably get some strange effects with your page when they decide to move if they're already in a visible section of the document.
<div class="tooltip" id="example-1-tooltip-1">
This is tooltip one, it has id example-1-tooltip-1.
</div>
This our first tooltip, very simple to start with, just a simple line of text.
The class tooltip flags up that this is a tooltip to sgTooltip.js, that's all you need to do other than set a unique id attribute to identify the tooltip by.
<div class="tooltip" id="example-1-tooltip-2">
This is tooltip two, it has id example-1-tooltip-2.<br /><br />
<b>Don't like the yellow background and black border?</b><br />
sgTooltip.js is entirely agnostic when it comes to style, it just makes
sure the element you've indicated appears and disappears and moves where
it should, it's entirely up to you what the tooltip looks like.<br /><br />
This particular style comes from my CSS rule for ".tooltip".
</div>
This is our second tooltip, this shows that you can be flexible about what you put in your tooltip, there's no reason to just limit yourself to a single line.
It also makes the point that sgTooltip.js imposes no style considerations on you, if it has a tooltip class, then it will be used, whatever HTML element it is, or however it is styled.
<div class="tooltip" id="example-1-tooltip-3">
<div class="thumbbox"><img alt="A picture of a hamster."
title="Hello there!"
src="images/205_40s.jpg" /></div>
<div class="textbox">This is tooltip three, it has id example-1-tooltip-3.<br /><br />
Oh, and you may have noticed it has an image too.<br />
You really <em>can</em> have whatever you like inside your tooltip.</div>
</div>
This is our third tooltip, a little example for those who need to see things to believe them.
This makes the tooltip div a rather more complicated affair, embedding an image and some internal divs with styling to place the image in a wide margin.
sgTooltip.js doesn't care or interfere, and it all just works.
</div>
This closes off our invisible tooltip container
<div>
<p>Let's try something different... how about a table with cells as
hotspots?</p>
<table class="example">
<tr>
<td class="tooltip-hotspot redbox"
sgtooltip:tooltip="example-1-tooltip-1">
Cell 1 Tooltip 1
</td>
<td class="tooltip-hotspot bluebox"
sgtooltip:tooltip="example-1-tooltip-2">
Cell 2 Tooltip 2
</td>
<td class="tooltip-hotspot greenbox"
sgtooltip:tooltip="example-1-tooltip-3">
Cell 3 Tooltip 3
</td>
</tr>
<tr>
<td class="tooltip-hotspot whitebox" colspan="3"
sgtooltip:tooltip="example-1-tooltip-1 example-1-tooltip-2 example-1-tooltip-3">
Cell 4 Tooltip 1, 2 & 3
</td>
</tr>
<tr>
<td class="tooltip-hotspot purplebox"
sgtooltip:tooltip="example-1-tooltip-1 example-1-tooltip-2">
Cell 5 Tooltip 1 & 2
</td>
<td class="tooltip-hotspot aquabox"
sgtooltip:tooltip="example-1-tooltip-2 example-1-tooltip-3">
Cell 6 Tooltip 2 & 3
</td>
<td class="tooltip-hotspot yellowbox"
sgtooltip:tooltip="example-1-tooltip-1 example-1-tooltip-3">
Cell 7 Tooltip 1 & 3
</td>
</tr>
</table>
</div>
Here we show that the hotspot doesn't need to be a div, it can be any element that produces mouse events, you just need to give it the tooltip-hotspot class and the sgtooltip:tooltip attribute and you're done.
Example 2: Visible Tooltips
Hotspots
This is hotspot one asking for tooltip one.
This is hotspot two asking for tooltip two.
This is hotspot three asking for tooltips one and two.
Tooltips
HTML source
The above example is generated by the HTML below.
<h1>Example 2: Visible Tooltips</h1>
<div class="column-1-50-50">
<div class="edge-join">
<h2>Hotspots</h2>
<div class="tooltip-hotspot redbox"
sgtooltip:tooltip="example-2-tooltip-1">
<p>This is hotspot one asking for tooltip one.</p>
</div>
<div class="tooltip-hotspot bluebox"
sgtooltip:tooltip="example-2-tooltip-2">
<p>This is hotspot two asking for tooltip two.</p>
</div>
<div class="tooltip-hotspot purplebox"
sgtooltip:tooltip="example-2-tooltip-1 example-2-tooltip-2">
<p>This is hotspot three asking for tooltips one and two.</p>
</div>
</div>
</div>
<div class="column-2-50-50">
<div class="join-edge">
<h2>Tooltips</h2>
<div class="tooltip redbox" id="example-2-tooltip-1">
This is tooltip one.
</div>
<div class="tooltip bluebox" id="example-2-tooltip-2">
This is tooltip two.
</div>
</div>
</div>
<div class="column-end">
</div>
Example 3: Horizontal Stacking
Hotspots
This is hotspot one asking for tooltip one.
This is hotspot two asking for tooltip two.
This is hotspot three asking for tooltips one and two.
Tooltips
HTML source
The above example is generated by the HTML below.
<h1>Example 3: Horizontal Stacking</h1>
<div class="column-1-50-50">
<div class="edge-join">
<h2>Hotspots</h2>
<div class="tooltip-hotspot redbox"
sgtooltip:tooltip="example-3-tooltip-1"
sgtooltip:stacking="horizontal">
The sgtooltip:stacking="horizontal" attribute configures the tooltips activated by this hotspot to be stacked left-to-right in horizontal fashion rather than the default top-to-bottom vertical fashion.
<p>This is hotspot one asking for tooltip one.</p>
</div>
<div class="tooltip-hotspot bluebox"
sgtooltip:tooltip="example-3-tooltip-2"
sgtooltip:stacking="horizontal">
<p>This is hotspot two asking for tooltip two.</p>
</div>
<div class="tooltip-hotspot purplebox"
sgtooltip:tooltip="example-3-tooltip-1 example-3-tooltip-2"
sgtooltip:stacking="horizontal">
<p>This is hotspot three asking for tooltips one and two.</p>
</div>
</div>
</div>
<div class="column-2-50-50">
<div class="join-edge">
<h2>Tooltips</h2>
<div class="tooltip redbox" id="example-3-tooltip-1">
This is tooltip one.
</div>
Nothing in the tooltips themselves needs to be configured to alter the stacking behaviour, it's purely a property of the hotspot being activated.
If you're looking at this with firebug (or the DOM inspector of your choice) open, you may notice that the tooltip divs change from having 20px left/right margins to having 0px ones: sgTooltip.js doesn't change these margins directly, however the tooltip moves into a container div with class sgtooltip-container, and there is a CSS rule in the site stylesheet that removes the margins for these tooltip boxes when inside the container.
See the reference manual for more details on this.
<div class="tooltip bluebox" id="example-3-tooltip-2">
This is tooltip two.
</div>
</div>
</div>
<div class="column-end">
</div>
Example 4: Fixed Position
Hotspots
This is hotspot one asking for tooltip one.
This is hotspot two asking for tooltip two.
This is hotspot three asking for tooltips one and two.
Tooltips
HTML source
The above example is generated by the HTML below.
<h1>Example 4: Fixed Position</h1>
<div class="column-1-50-50">
<div class="edge-join">
<h2>Hotspots</h2>
<div class="tooltip-hotspot redbox"
sgtooltip:tooltip="example-4-tooltip-1"
sgtooltip:position="fixed">
The sgtooltip:position="fixed" attribute configures the tooltips activated by this hotspot to be positioned at a fixed location in the document window, rather than the default of being relative to the mouse pointer.
<p>This is hotspot one asking for tooltip one.</p>
</div>
<div class="tooltip-hotspot bluebox"
sgtooltip:tooltip="example-4-tooltip-2"
sgtooltip:position="fixed">
<p>This is hotspot two asking for tooltip two.</p>
</div>
<div class="tooltip-hotspot purplebox"
sgtooltip:tooltip="example-4-tooltip-1 example-4-tooltip-2"
sgtooltip:position="fixed">
<p>This is hotspot three asking for tooltips one and two.</p>
</div>
</div>
</div>
<div class="column-2-50-50">
<div class="join-edge">
<h2>Tooltips</h2>
<div class="tooltip redbox" id="example-4-tooltip-1">
This is tooltip one.
</div>
<div class="tooltip bluebox" id="example-4-tooltip-2">
This is tooltip two.
</div>
</div>
</div>
<div class="column-end">
</div>