Javascript Tooltip

DOWNLOAD DEMOs & SOURCE CODE
v2014.2.20

License: US$20   ... about license    

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 from external files or pages 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.

  • Mobile devices

    On iOS(iPad, iPhone, iPod), Android, BlackBerry or IEMobile devices, the tooltip popup will automatically show a close button at the tooltip's top-right corner so that it can be closed.

  • 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.

  • Fully Customizable Styles

    Every style of the tooltip is completely configurable, such as background color, border width, border color and callout size.

  • Supported Browsers cross browsers

    Tooltip is supported by all major browsers, mobile devices, and touch-screens:
    IE 6.0+, Firefox 1.5+, Chrome 0.2+, Safari 3.0+, Opera 9.1+, Netscape 7.2+, and hand-held devices such as iPad, iPhone, android...

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</span>

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

  • Easy to show rich HTML content
  • Search engine friendly
  • Allow embedding server controls within Forms

    For example, here is a tooltip that includes ASP.NET TextBox and Button controls

    Click me  

    <a href="#" onclick="tooltip.pop(this, '#demo3_tip', {overlay:true, position:4}); 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" onclick="Button1_Click" /> <input type="button" onclick = "tooltip.hide()" value="Cancel" /> </div> </div>
tooltips SEO

The tooltip content comes from an element on the page. So this approach is Search Engine Friendly.
Name:

   
(Enter a name and click "Login" button)

3. tooltip.ajax(targetElement, url[, ajaxSettings][, options])

triggered by hijax link

load page fragment

<a class="tooltip" onclick="return false;" href="tooltip/src/tooltip-ajax.html" onmouseover="tooltip.ajax(this, 'tooltip/src/tooltip-ajax.html');" >triggered by hijax link</a> <a href="tooltip/src/tooltip-ajax.html#div2" onclick="return false;" onmouseover="tooltip.ajax(this, 'tooltip/src/tooltip-ajax.html#div2');" >load page fragment</a>
  • SEO-fiendly

    To make the Ajax content SEO-friendly, we turn above links to hijax links by:
    • Offer static link through href so that search engine bots will follow the link and crawl the page;
    • Set the onclick="return false;" so that the href will be disabled and the current page won't be navigated away from users when the link is clicked.
  • Page fragment

    To load a page fragment, we appended a hash id "#div2" to the Ajax url so that only the page fragment within the DIV element (id="div2") will be loaded.

 

The demo below shows how tooltip is populated from an external XML document products.xml.

tooltip cd1 tooltip cd2 tooltip cd3 tooltip cd4
<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
  1. Download the demos and the source code by clicking on the Download button above.
  2. 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>
  3. 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
  1. 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 another element or the id of another element 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= { ... (discussed in Tooltip Options) ... };

    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 with id="span1".
    <script>tooltip.pop('span1', 'Hi', { sticky:true, position:4 });</script>
  2. 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).
  3. tooltip.ajax(targetElement, url[, ajaxSettings][, options])

    This Ajax function will populate tooltip with the content retrieved from another page or document. It does not support cross-domain request.

    url
    The URL of a page or a data file to which the request is sent.

    Note: If the response data type is "html"(this is the default type), and the URL contains a hash id, the tooltip will take the hash id as an HTML id selector and load the page fragment by the HTML id selector. See Demo 3.

    ajaxSettings
    The ajaxSettings(optional) is set using the following format:

    { context: dataObject, success: callbackName, fail: failedCallbackName, responseType: typeName }

    Details about each Ajax setting

    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>
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, smartPosition: false, offsetX: 0, offsetY: 0, maxWidth: 400, calloutSize: 9, calloutPosition: 0.3, sticky: false, overlay: false, license: "mylicense" };
showDelay

An integer specifying how many milliseconds should elapse before the tooltip pops up

hideDelay

The milliseconds taken for the tooltip starts fading away after the mouse leave the target element

effect

"slide" or "fade" animation effect

duration

The milliseconds taken by the animation

relativeTo

Can be set to "mouse" or "element" indicating whether the tooltip should appear relative to the mouse or to the target element. It only applies when position is ranged from 0 - 3.

position

An integer between 0 - 6 specifying the tooltip position:

  • 0: top
  • 1: right
  • 2: bottom
  • 3: left

Above positions are relative to the target element. The following are relative to the browser screen:

  • 4: center
  • 5: top left
  • 6: bottom right
The tooltip will not have the callout if position value is greater than 3.
smartPosition

true or false.

When setting to true, if there is no enough space to show the tooltip window, the tooltip will re-position itself to make it always viewable. Sometimes it may cover some contents that users want to see. To avoid this, you can set the smartPosition option to false to disable the re-positioning.

offsetX, offsetY

An integer specifying the tooltip offset (in pixels) from the expected tooltip position.

The default value is 0.

maxWidth

An integer specifying the max width of the tooltip.

  • 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.
calloutSize

An integer specifying the callout size of the tooltip.

Note: There will be no callout if position is larger than 3.

calloutPosition

An decimal between 0 and 1 specifying the callout position.

For example: setting it to 0.3 will make it close to the left if position is 0 or 2, and make it close to the top if position is 1 or 3; setting it to 0.5 will make the callout stay in the middle.

sticky

true, false or 1.

Specify whether the tooltip will hide when the mouse moves away from the target element.

Both true and 1 will make the tooltip sticky. The difference is:

If sticky: true, the tooltip will fade away when the area outside the tooltip box is clicked; but sticky: 1 will not.

overlay

true, false or 1.

If setting to true or 1, there will be an overlay element covering all page areas when the tooltip pops up.

  • Setting overlay to true or 1 will automatically make the tooltip sticky.
  • Difference between true and 1: If overlay is set to true, the tooltip will fade away when the overlay is clicked. Otherwise, if overlay is 1, you have to click the close button to cancel the tooltip.
license

Place to set your license.

Please refer to License and Purchase for details.

The ajaxSettings parameter

  • 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

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
License Fee: US$20.00
Buy License Now
  • 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>

Ask Question

Question Title:
Your name:
+ =    
  • If your question is for troubleshooting, please read Troubleshooting Request before posting.
  • A title with good keywords will help others. Please make your title specific and on-topic
  • Questions related to styles(CSS) may not be answered

more ...