Javascript Tooltip is a box that appears following a client event, such as onmouseover, onclick, onfocus, etc. Only one tooltip instance can be opened at a time.
Features
- Content Source
Tooltip content can be held in script,
borrowed from an HTML element on the page,
or obtained via Ajax.
- HTML Content
Tooltip content can include images, any rich HTML, and even server controls(such as ASP.NET TextBox).
- Various Positioning
Top, right, bottom, or left of an element(or the mouse), or in the center, bottom-right corner, or top-left of the screen.
The positioning can be set either globally or individually.
- Open
The tooltip can be opened respond to any element event, such as onmouseover, onfocus, onclick, or be opened programmatically.
- Close
The tooltip can be closed by onmouseout(default), or by click the close button (or optionally other screen area) when the tooltip is set to be "sticky", or be closed programmatically.
- Easy to be integrated into other controls or widgets
Example: Slider with Tooltip
- Fully Customizable Styles
Every style of the tooltip is completely configurable, such as background color,
border width, border color and callout size.
- Supported Browsers
Tooltip is supported by all major browsers:
IE 6.0+, Firefox 1.5+, Chrome 0.2+, Safari 3.0+, Opera 9.1+, Netscape 7.2+
- Current release v2013.3.18
- License:
US$20.00 per site ... about license
Declared in script, such as:
<a onclick="tooltip.pop(this,\'Hello\');">Hi</a>
An element on the page, such as <div id="
div1">... (div1 and its content will be used as the tooltip content) ...</div>:
<a onclick="tooltip.pop(this, '#div1');">Hi</a>
Content comes from external files such as text document, XML document, or other pages.
For example:
tooltip.ajax(this, 'help/tip1.txt')
1. tooltip.pop(targetElement, text [, options])
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.pop(targetElement, '#contentElementId' [, options])
Hover me
The tooltip will show the page element ( id='contentElementId' ).
<span class="tooltip" onmouseover="
tooltip.pop(this, '#demo2_tip')">
Hover me
</span>
<div style="display:none;">
<div id="demo2_tip">
<b>SEO</b><br /><br />
<img src="tooltips.gif" style="float:right;" />
The tooltip content is an element on the page.
So this approach of setting tooltip content is
<b>Search Engine Friendly</b>.
</div>
</div>
Advantage of this approach
3. tooltip.ajax(targetElement, url[, ajaxSettings][, options])
This demo shows you how to use the
tooltip.ajax method to populate content from an external document
products.xml.
<img src="tooltips-cd1.jpg" onmouseover="myAjaxSetting.context.index=1;
tooltip.ajax(this, 'products.xml', myAjaxSetting, { position:0, effect:'slide' });" />
<img src="tooltips-cd2.jpg" onmouseover="myAjaxSetting.context.index=2;
tooltip.ajax(this, 'products.xml', myAjaxSetting, { position:0, effect:'slide' });" />
<img src="tooltips-cd3.jpg" onmouseover="myAjaxSetting.context.index=3;
tooltip.ajax(this, 'products.xml', myAjaxSetting, { position:0, effect:'slide' });" />
<img src="tooltips-cd4.jpg" onmouseover="myAjaxSetting.context.index=4;
tooltip.ajax(this, 'products.xml', myAjaxSetting, { position:0, effect:'slide' });" />
//The following is the Javascript:
<script type="text/javascript">
var myAjaxSetting = {
context: { index: -1 },
success: myCallback,
responseType: "xml"
};
function myCallback(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;width:75px;height:75px;' />";
return "<div style='width:220px;'>" + image + "<b>" + title + "</b><br /><i>"
+ artist + "</i><br /><br />Price: <span class='red'>$" + price + "</span></div>";
}
</script>
Index
Quick start
It is as easy as the following 1-2-3 to get the tooltip to work.
...details
- Download the demos and the source code by clicking on the Download button above.
- Include - Put the extracted files into your site, and add the following two links into the <head> section of the page.
<link type="text/css" rel="stylesheet" href="/(path)/tooltip.css" />
<script type="text/javascript" src="/(path)/tooltip.js"></script>
- Use - Add a client event to the target element in the page that will trigger the tooltip:
<span class="tooltip" onmouseover="tooltip.pop(this, 'Oracle is a database')">What is Oracle</span>
The event can be: onmouseover, onclick, onfocus, etc.
Back to Top
3 Ways to Set Tooltip Content
There are three ways to set tooltip content.
...details
-
tooltip.pop(targetElement, text[, options])
targetElement: the element where the tooltip will launch from. Usually it is the target element itself where the tooltip is triggered, so most of the time it is represented by the Javascript key word this.
However, you can also assign other element or other element id to it.
text: The text or HTML to be displayed by the tooltip.
<a href="/hi.htm" onmouseover="tooltip.pop(this, 'Hi there')">Hi</a>
options: the tooltip.js contains the tooltip global settings:
var tooltipOptions=
{
showDelay: 150,
hideDelay: 300,
effect: "slide",
duration: 200,
relativeTo: "element",
position: 1,
offsetX: 0,
offsetY: 0,
maxWidth: 400,
calloutSize: 9,
sticky: false,
overlay: false,
license: "mylicense"
};
You can override any of the global settings by passing in new options. For example:
<a href="/hi.html" onmouseover="tooltip.pop(this,
'Hi there', { maxWidth:600 })">Hi</a>
// alerts "Hi" on page load from the element of id="span1".
<script>tooltip.pop('span1', 'Hi', { sticky:true, position:4 });</script>
-
tooltip.pop(targetElement, '#contentElementId' [, options])
contentElementId: The element with id="contentElementId" will be moved into the tooltip box when the tooltip is triggered, and the element will be appended back to its original containing block when this tooltip is not being used.
If you just want to use the innerHTML content of the element and don't want to move the containing element into the tooltip, put double hash sign before its id: '##contentElementId'. Then its innerHTML will be copied into the tooltip instance.
- Usually the contentElement is for holding the tooltip content. Therefore, its parent node (the containing block) is usually
styled as display:none;
- Search engine friendly: Using this approach, your tooltip content will be crawled and indexed by search bot such as Google.
- You can embed server controls into the tooltip by using this approach (see demo "Click me" under the Demos tab).
-
tooltip.ajax(targetElement, url[, ajaxSettings][, options])
This method will retrieve tooltip content from another page or document.
url The URL of a page or a data file to which the request is sent.
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.
Examples:
<img src="question.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>
//Refer to the last demo under the Demos tag for details
<span onmouseover="tooltip.ajax(this, '../tips.xml', ajaxSet1);">
Details</span>
<script type="text/javascript">
var ajaxSet1 = {
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>
If it takes a longer time to retrieve the Ajax data, a pinning image will show up in the tooltip.
Example
<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.Img + "<b>" + data.Title + "</b><br/>" + data.Content;
}
</script>
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 below. 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 process 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 Top
Tooltip Options
You can configure the tooltip global options by modifying the var
tooltipOptions at the top of the script.
...details
Open the downloaded tooltip.js file, you will see:
var tooltipOptions=
{
showDelay: 150,
hideDelay: 300,
effect: "slide",
duration: 200,
relativeTo: "element",
position: 1,
offsetX: 0,
offsetY: 0,
maxWidth: 400,
calloutSize: 9,
sticky: false,
overlay: false,
license: "mylicense"
};
Back to Top
Override Global Options
For a specific tooltip instance, you can override any of the tooltip options specified at the top of the script.
You can doing so by passing a new option object(partial of the global options) into the tooltip triggering event (the last parameter). Examples
License and Purchase
...details
- The license is issued on a per-domain basis (valid for one domain and its sub-domains)
- The license is valid forever for future updates/upgrades with no requirement to renew
- The acquired license should be set to the license property in the tooltip.js file. The JavaScript will use its own match pattern code to verify the license with the domain name on the browser's address bar. So the JavaScript file itself will do the checking and no other external services will be involved.
- The Tooltip will periodically show a purchase reminder if the verification fails. Under your development environment(localhost server or local file path), you can temporarily set the license as "64628" to disable the purchase reminder.
When you have acquired the license, open the tooltip.js with Notepad, and update the license property:
var tooltipOptions=
{
... ...
license: "yourlicense"
};
Back to Top
Integrate with Other Widgets
Menucool Tooltip can be easily integrated into other Web UI widgets.
Examples:
Open or Close Tooltip Automatically
The following code creates an alert 2 seconds after page load, and the alert fades away by itself about three seconds later.
Demo
// Place the script anywhere on your page (within the head or body
// section, but not before the link to the tooltip.js )
<script>
function open() {
tooltip.pop(null,'Simulating a reminder', {position:6});
}
setTimeout(open, 2000);
setTimeout(tooltip.hide, 5500);
</script>
Customize Styles
If you want to define your own tooltip style, you can easily customize it through the tooltip.css file.
CSS selectors:
- #mcTooltip
The main place to define the styles of the tooltip, such as border colour, background, line-height, etc.
- #mcttCloseButton
Only available when the tooltip sticky or overlay property in the tooltip.js has been set to true. It uses an image, closeBtn.gif, that comes with the download zip file.
- #tooltipAjaxSpin
Only available when the tooltip is triggered by the
tooltip.ajax(...) function. It has a loading image background indicating a request is in progress.
Tooltip Loading Demo
The loading image will not display when the ajax data comes back sooner.
- #mcOverlay
Only applies when overlay property in the tooltip.js has been set to true or 1. You can specify the overlay opacity and background colour through this selector.
The tooltip markup below will help to understand how the CSS selectors work together:
<div id="mcTooltipWrapper">
<div id="mcTooltip">
<div id="tooltipAjaxSpin"></div>
</div>
<div id="mcttCo"></div>
<div id="mcttCloseButton"></div>
</div>
<div id="mcOverlay"></div>