Features
Declared in triggering scripts, such as:
<a onclick="tooltip.pop(this,\'Hello\');">Hi</a>
Any other element's content on the page, such as the inner HTML content of <div id="
div1">... (content that will be used as tooltip content) ...</div>:
<a onclick="tooltip.add(this, 'div1');">Hi</a>
Content comes from external files such as text document, XML document, or other pages (can be server-side) through the built-in AJAX mechanism.
- tooltip.pop(this, text)
- tooltip.add(this, contentElementId)
- tooltip.add(this, contentElementId, true)
- Integrate into other controls
- tooltip.ajax(this, url[, settings]) XML
- tooltip.ajax(this, url[, settings]) JSON
- Auto popup and hide
- Hide tooltip by clicking overlay
1. tooltip.pop(this, text)
Hover me
This is the simplest way to show tooltips.
<span class="tooltip" onmouseover="tooltip.pop(this,
'<span class=\'red\'>Hi</span> there')">Hover me</a>
2. tooltip.add(this, contentElementId) or tooltip.add(this, contentElement)
Hover me
If your tooltip content contains a long text or HTML, it is more convenient to use this approach to show
the innerHTML of the contentElement. It is also a search engine friendly approach.
<span class="tooltip" onmouseover="
tooltip.add(this,
'demo2_tip')">Hover me</span>
<div id="demo2_tip" style="display:none;">
<img src="tooltips.gif" style="float:right;" />
The content is taken from the inner HTML of an element on the page.
So this approach of setting tooltip content is <b>SEO friendly</b>
(search engine friendly).
</div>
3. tooltip.add(this, contentElementId, true) or tooltip.add(this, contentElement, true)
Click me
If you want to include the whole contentElement (not just its innerHTML as
above), you should add another parameter true after the contentElementId(or contentElement).
If the content contains server controls (such as ASP.NET TextBox control), it is mandatory to use this approach.
<a href="#" onclick="this.overlay=true; this.position=4;
tooltip.add(this, 'demo3_tip', true); return false;">Click me</a>
<div style="display:none;">
<div id="demo3_tip">
Name: <asp:TextBox ID="TextBox1" runat="server" /><br />
<asp:Button ID="Button1" runat="server" Text="Login"
CssClass="btn" onclick="Button1_Click" />
<input type="button" onclick = "tooltip.hide()"
class="btn1" value="Cancel" />
</div>
</div>
4. Integrate into other controls
details
details
details
details
By binding
tooltip.pop method to an element's event, the tooltip can be easily integrated into other controls. This demo demonstrates how the tooltip is integrated into an ASP.NET Repeater control.
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div class="repeaterRow">
<asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("Thumbnail") %>'
LargeImage='<%# Eval("Image")%>' onmouseover='getLargeImage(this)'
style="width:100px;height:70px;" /><br />
<span class="tooltip" data="<%#getTooltipData(Eval("MyId"))%>"
onmouseover="tooltip.pop(this, this.getAttribute('data'))">details</span>
</div>
</ItemTemplate>
</asp:Repeater>
//Following is the Javascript
<script type="text/javascript">
function getLargeImage(element) {
var img = "<img src='" + element.getAttribute("LargeImage") +
"' style='width:300px;height:210px;' />";
tooltip.pop(element, img);
}
</script>
5. tooltip.ajax(this, url[, ajaxSettings])
The tooltip content source in this example is an XML file.
This demo shows you the ajax method to retrieve information from another document, and how to filter data. It also shows how the
position
of each individual tooltip can be set differently from the global
position setting.
<img src="tooltips-cd1.jpg" onmouseover="this.position=3; ajax5.context.index=1;
tooltip.ajax(this, 'products.xml', ajax5);" />
<img src="tooltips-cd2.jpg" onmouseover="this.position=0; ajax5.context.index=2;
tooltip.ajax(this, 'products.xml', ajax5);" />
<img src="tooltips-cd3.jpg" onmouseover="this.position=2; ajax5.context.index=3;
tooltip.ajax(this, 'products.xml', ajax5);" />
<img src="tooltips-cd4.jpg" onmouseover="this.position=1; ajax5.context.index=4;
tooltip.ajax(this, 'products.xml', ajax5);" />
//Following is the Javascript:
<script type="text/javascript">
var ajax5 = {
context: { index: -1 },
success: callback5,
responseType: "xml"
};
function callback5(response, context) {
var x = response.documentElement.getElementsByTagName("cd")[context.index];
var title = x.getElementsByTagName("title")[0].childNodes[0].nodeValue;
var artist = x.getElementsByTagName("artist")[0].childNodes[0].nodeValue;
var price = x.getElementsByTagName("price")[0].childNodes[0].nodeValue;
var image = "<img src='src/tooltips-cd" + context.index +
".jpg' style='float:right;margin-left:12px;' />";
return "<div style='width:220px;'>" + image + "<b>" + title + "</b><br /><i>"
+ artist + "</i><br /><br />Price: <span class='red'>$" + price + "</span></div>";
}
</script>
6. tooltip.ajax(this, url[, ajaxSettings])
The AJAX response from server in this example is
JSON object that is treated as Javascript object.
Hover me. The tooltip content is retrieved from web server on demand at runtime.
<a href="javascript:void(0)" onmouseover="tooltip.ajax(this, 'src/GetDataHandler.ashx?pip=5',
{ success: callback6, responseType: 'json' } )">Hover me</a>
//Following is the Javascript in the head section of the page:
<script type="text/javascript">
function callback6(response) {
return "<b>" + response.Title + "</b><hr />" + response.Content;
}
</script>
7. Auto popup and hide
The tooltip is not limited to be triggered by an HTML element. You can create a Javascript object as a dummy tooltip target, set options with it, trigger the tooltip at any time you like,
and close it by itself after a duration of time.
//
Note: The script below
MUST be placed inside the
body element of the page.
//(If your page is ASP.NET, you can also register it with the method:
//
Page.ClientScript.RegisterStartupScript)
<script type="text/javascript">
var obj = new Object();
obj.position = 6;
obj.autoShowDelay = 1000;
obj.duration = 3000;
tooltip.pop(obj,"<img src='tooltip.gif' style='width:300px;height:90px;'/>");
</script>
Please refer to Manipulate tooltip programmatically for more details.
8. Hide tooltip by clicking overlay
Click me
Customize styles has listed all the IDs of the tooltip's
elements.
The overlay element's ID is
mcOverlay. Knowing this, we can easily create a tooltip that can be closed by clicking the overlay.
<a href="javascript:void(0)" onclick="this.overlay=true;
tooltip.pop(this, 'Hi there');
document.getElementById('mcttCloseButton').style.display='none';
document.getElementById('mcOverlay').onclick = tooltip.hide;">Click me</a>
Note: Above display and onclick should be defined
after tooltip.pop(this, 'Hi there');
Index
Quick start
It is as easy as following 1-2-3 to get the tooltip to work.
...details
- - Download the source code (Tooltip.js, Tooltip.css and closeBtn.gif).
- Include - Put the extracted files into your site, and add the following two links into the <head> section of the
page where you want to use the tooltip.
<link type="text/css" rel="stylesheet" href="/(path)/Tooltip.css" />
<script type="text/javascript" src="/(path)/Tooltip.js"></script>
- Use - Find the element that triggers the tooltip, and set the client event for the
tooltip:
<span class="tooltip" onmouseover="tooltip.pop(this, 'Hi there')">hi</span>
It's done.
To use its more features please read the rest of these instructions.
Back to Index
Triggering Script
There are three ways to trigger the tooltip.
...details
-
tooltip.pop(this, text)
text The text or HTML to be displayed by the tooltip.
<a href="/hi.htm" onmouseover="tooltip.pop(this, 'Hi there')">Hi</a>
<span id="position1"> </span>
<script type="text/javascript">
//launch tooltip after page load from the position of the element that id="position1".
tooltip.pop("position1", "<h3>Hi</h3>, there");
</script>
The first parameter required by the tooltip.pop function represents the element from where the tooltip will pop up. Usually it is the target element itself, so most of the time it is represented by the Javascript key word this.
However, as shown above, you can also assign other element or other element id to it.
-
tooltip.add(this, contentElementId [, boolean])
contentElementId The element id (or just the DOM element) whose content will be used as the tooltip content.
boolean (optional) Usually it is omitted, or set to false. In this case only the innerHTML of the contentElement
will be used as the tooltip content.
If this boolean is set to true,
the entire contentElement will be used as tooltip content.
<span onmouseover="tooltip.add(this, 'tip1');">Hint</span>
<div style="display:none;">
<div id="tip1">
<img src="hi.gif" /> Hi there.
</div>
</div>
- Usually the contentElement is for holding the tooltip content. Therefore, its parent node (the containing block) is usually
styled as display:none;
- SEO-friendly tooltip: With this tooltip.add(...) approach, search engines such as Google can access and index your tooltip content.
- If your tooltip contains server controls,
you should always use the tooltip.add(this, contentElement, true) approach.
(visit Embedding Server Controls into Tooltip for details)
- For AJAX that calls for content from other documents or pages at runtime.
tooltip.ajax(this, url [, ajaxSettings])
url The URL of a page or a data file to which the request is sent to
retrieve the tooltip content.
Note: It does not support cross-domain request.
ajaxSettings (optional) The ajaxSettings is set using the following format:
{ context: dataObject, success: callbackName, fail: failedCallbackName, responseType: typeName }
More details will be discussed later
in the yellow box below.
The following are five examples. You can also refer to Tooltip Demo 5 and Tooltip Demo 6 for more details.
<img src="questionMark.gif" onclick="tooltip.ajax(this, 'help/tip1.txt')" />
<asp:TextBox ID="Txt1" runat="server" onfocus="tooltip.ajax(this, 'Tips.ashx?tipid=1')">Hi</asp:TextBox>
<span onmouseover="tooltip.ajax(this, '../tips.xml', ajaxObj);">Details</span>
<script type="text/javascript">
var ajaxObj = {
context: { tipId: 5 },
success: callback1,
responseType: "xml"
};
function callback1(response, context) {
var x = response.documentElement.getElementsByTagName("tip");
return x[context.tipId].childNodes[0].nodeValue;
}
</script>
<a href="javascript:void(0)"
onmouseover="tooltip.ajax(this, 'src/GetDataHandler.ashx?pid=6',
{ success: callback2, responseType: 'json' } )">Details</a>
<script type="text/javascript">
function callback2(data) {
return data.Title + "<br/>" + data.Content;
}
</script>
The following is taken from page
CSS Menus for the tooltip of the first CSS Source Code link.
<script type="text/javascript">
var ajaxObj = {
success: callback1,
responseType: "html"
};
function callback1(response) {
return "<div class='code'><pre>" + response + "</pre></div>"; ;
}
</script>
<span class="tooltip" onmouseover=
"tooltip.ajax(this, 'skins/1/css-menu.css', ajaxObj)">CSS</span>
About ajaxSettings
- ajaxSettings is optional. If it is not defined, the data returned from server will be used directly as HTML string.
ajaxSettings has four ajax settings as follows. Every setting is optional.
{
context: dataObject,
success: callbackName,
fail: failedCallbackName,
responseType: typeName
}
- context: the context data passed through the request call and made available to the
callback functions. It is a set of key/value pairs inside curly bracket, i.e. {pid:2, category:'art'}. Usually it will be used in the callback function to handle or filter the raw response data.
- success: specify the name of the function to be called if the request succeeds. The function gets passed two arguments: the data returned from the server, formatted according to the responseType parameter; and the context object.
If success setting is omitted or set to null, the response will be directly used as the tooltip
content.
- fail: specify the name of the function to be called if the request fails. The function has one argument: the context object.
If this setting is omitted, tooltip will display "Failed to retieave the information" when the request fails to get response.
-
responseType: The type of data that you're expecting back from the server. The available types are:
"xml": Returns an XML document that can be processed by Javascript(XML DOM);
"html": Returns text or HTML;
"json": Evaluates the response as JSON and returns a Javascript object.
- The ajax request will be sent with GET method, in asynchronous mode.
Back to Index
Embedding Server Controls into Tooltip
Server-side running controls (such as ASP.NET control, ASP.NET user control) are
allowed to be included as the tooltip content.
...details
You must use tooltip.add(this, contentElement, true) script when your tooltip contains server controls.
Note: the second parameter true is mandatory.
Please view Tooltip Demo 3 for more details.
Back to Index
Global options
Open the downloaded Tooltip.js file, and you can configure the tooltip global options by modifying the var
tooltip_options at the begining of the script.
...details
- showDelay - An integer specifying how many milliseconds should elapse before the tooltip pops up.
- animation - Either "fade" or "none". If set to "fade", tooltip will have fade-in/fade-out transition effects.
- animationSpeed - Value should be integer between 1 to 100 (100 being fastest).
Note: Only available when animation has been set to "fade".
15 is the default value.
- relativeTo - Can be set to "mouse" or "element" indicating whether the tooltip should appear relative to the mouse or to the target element. It is only useful when
position is ranged from 0 - 3.
- position - An integer between 0 - 6. The tooltip will appear from the following positions:
- 0: from the top relative to mouse or target specified by the relativeTo property;
- 1: from the right relative to mouse or target specified by the relativeTo property;
- 2: from the bottom relative to mouse or target specified by the relativeTo property;
- 3: from the left relative to mouse or target specified by the relativeTo property;
- 4: from the center of the browser window;
- 5: from the top left of the browser window;
- 6: from the bottom right corner of the browser window.
- The tooltip will not have the callout if position value is greater than 3.
- offsetX, offsetY - An integer specifying the tooltip offset (in pixels) from the expected tooltip position. They can be used to further refine the positioning.
The default value is 0.
- maxWidth - An integer specifying the max width of the tooltip. Default value is 300.
- If the content width required is less than the maxWidth, the tooltip width
will be the content width.
- If the content width required is larger than the maxWidth and unable to wrap its content to fit the maxWidth, for example there is an image with a width larger than maxWidth, the tooltip will expand to the content width ignoring the maxWidth specification.
- borderWidth - An integer specifying the border width of the tooltip window. Its default value is 2.
- borderColor - Border color of the tooltip window.
- backgroundColor - Background color of the tooltip window.
- calloutSize - An integer specifying the callout size of the tooltip. Its default value is
9.
Note: There will be no callout if position is set larger than 3.
- sticky - Specify whether the tooltip will hide when the mouse moves away
from the target element.
- license - Place to set your license when you have acquired it.
Please refer to License for details.
There are more tooltip options such as
autoShowDelay,
duration, and
overlay. However, they are
tooltip-specific options only.
Tooltip-specific options
The following options are available for a specific tooltip that make the tooltip
look and behave differently from other tooltips.
...details
- relativeTo, position, maxWidth, sticky - If used, they will overwrite the global options: relativeTo, position, maxWidth, and sticky.
- autoShowDelay, duration - will be discussed in next section: Manipulate tooltip programmatically
- overlay - true or false. If set to true, there will be an overlay element covering all page areas when the tooltip pops up.
- Setting overlay to true will automatically make the tooltip sticky: the tooltip can only be closed by its close button.
- Although you can make the overlay translucent through the Customize styles, all page area becomes unclickable until the tooltip is closed.
These options can be set through the target element (triggering element)'s properties:
<img src="img1.jpg" onload="this.relativeTo='element'; this.position=4; tooltip.pop(this, 'Hello there.');" />
Tooltip Demo 3,
5,
7 and
8 have those tooltip-specific option settings.
Back to Index
Manipulate tooltip programmatically
Tooltip is not limited to be triggered by an element's event such as onmouseover, and not limited to be closed in response to an event. It can all be controlled programmatically.
...details
More properties and methods listed below are available to facilitate users with more flexible controls over the tooltip:
- autoShowDelay
- duration
- tooltip.hide()
- tooltip.addToPageLoadEvent(func)
Their usage will be illustrated in the following examples:
Tooltip Demo 7: Auto popup and hide is an example where the tooltip pops up automatically
one second after the page load, and closes by itself three seconds after.
<script type="text/javascript">
var obj = new Object();
obj.position = 6;
obj.autoShowDelay = 1000;
obj.duration = 3000;
tooltip.pop(obj, "<img src='src/tooltip-demo7.gif' style='width:500px;height:200px;' />");
</script>
If you want the tooltip to be displayed at the position of a certain element,
you can replace above obj with:
var obj = document.getElementById('elementID');
obj.position = 2; // value 1 - 3.
obj.relativeTo = "element"; // if set to "mouse", it will popup from the center point of the element if the mouse is not hovering the element at the moment.
Note: The above Javascript code
MUST be placed inside the
body element of the page. Otherwise an error will occur. If you
really want to write it in an external file, or include it in the head section of the page, you should wrap above codes in a function,
and trigger the function by a window load event.
tooltip.addToPageLoadEvent(func
) can be used for registering the function call to the window onload event:
<script type="text/javascript">
function showTip() {
(code in the block above)
}
tooltip.addToPageLoadEvent(showTip);
</script>
Tooltip Demo 8: Hide tooltip by clicking overlay is another example that you can refer to
for this topic.
Back to Index
Customize styles
...details
The downloaded
Tooltip.css file defines the style of the tooltip.
Please NOTE that the border width, border color, background color and callout size can only be defined by the Javascript (var tooltip_options).
There are six CSS selectors available to control the look of the tooltip:
- #mcTooltip
- #mcTooltipWrapper
- #mcttCloseButton
- #mcttCo
- #tooltipAjaxSpin
- #mcOverlay
They define the styles for the following tooltip HTML elements:
<div id="mcTooltipWrapper">
<div id="mcTooltip">
<div id="tooltipAjaxSpin"></div>
</div>
<div id="mcttCo"></div>
<div id="mcttCloseButton"></div>
</div>
<div id="mcOverlay"></div>
- #mcTooltip - This is the CSS selector we use most to define the look of the
tooltip, such as font color, font-size, padding, and so on. It can also be used
to define a background image for the tooltip, such as:
CSS:
#mcTooltip { background-image:url(img/gradient.gif); background-repeat:repeat-x; }
- #mcTooltipWrapper - Usually we don't need to modify its default settings.
- #mcttCloseButton - Only applicable when the tooltip has been set to be
sticky or overlay. There is an image file, closeBtn.gif,
that comes with the download zip file. You can replace it with your own prefered image and link to it properly in the Tooltip.css.
- #mcttCo - This is the callout element. It is visible when the tooltip position property
is set to 0 - 3. If you also want it invisible in these positions, you can use this selector to set: #mcttCo { display:none; }
- #tooltipAjaxSpin - Only applicable when you are using tooltip.ajax call. When the tooltip has already popped up but the data retrieved by AJAX call is still not
returned, the tooltip will display "Loading ...". If your AJAX data retrieving speed is fast, users may not notice it at all.
You can use this selector to define the style of the "Loading ..." message. Or, you can use it to style a spinning image as follows:
#tooltipAjaxSpin {margin:20px 50px; background:#ffffee url(spin.gif) no-repeat center center; width:50px; height:30px; font-size:0; color:#FFFFEE;}
Note:
- The above color:#FFFFEE; should be using the tooltip's background color to make the "Loading ..." message invisible.
- Here is the spin.gif
. In the CSS file, its path should be relative to the CSS file.
- #mcOverlay - Only applicable when the tooltip overlay property
has been set to be true. There is a default setting for it in
Tooltip.js. You can modify it freely to your needs.
Back to Index
License and Purchase
...details
The license legally entitles you to deploy the tooltip software to a single production site.
The license will check your domain name on the browser's location bar. There is no license check made to other places. If they don't match, the tooltip will display an activation reminder.
You do not need a license for development or evalution when using localhost as the domain. The tooltip package is complete and fully functional without a license.
The last property of the var
tooltip_options in Tooltip.js is the place to add the license.
License: US$20.00 per site
Buy License Now
Back to Index