Javascript Tooltip

Features
How to Use
Advanced Usage

Javascript Tooltip

is a box that appears following a client event, such as onmouseover, onclick, etc.

Triggering Events

onmouseover, onclick, onfocus, ect.

It leaves to the triggering element to decide how to launch the tooltip:
<span onclick="tooltip.pop(this, 'Hello world!')"> Click me </span>
Accessible Content

The tooltip will stay when moving mouse from target element to tooltip. Example

It also has an option smartPosition. If set to true, when it finds there is no enough space to show, the tooltip box will reposition itself to make it always viewable.
Content Source Location
- can be specified directly in script
- or written into HTML element anywhere in the page
- or obtained from external documents or other web pages through Ajax
Closing Options

By default the tooltip box will close when the mouse left the target or the tooltip popup content.

If requiring the tooltip stay even if the mouse has left the target, you can use its sticky option. When it is set to true, it will have a close button ×, and the popup can only be closed by the button.
Cross-browser compatible

The tooltip works beautifully in every browser on any device:

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...
License Fee: $20.00
About License

Quick start

It is as easy as the following 1-2-3 to get the tooltip to work.

How to Set Tooltip Content

There are three ways to choose from:

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 global tooltip options:
var tooltipOptions= { ... (discussed in Tooltip Options) ... };
You can override any of the global settings by passing in new options to the tooltip launch method. Examples:
<a href="/hi.html" onmouseover="tooltip.pop(this, 'Hi', {maxWidth:600})">Hi</a> // alerts "Hi" on page load from the element with id="span1". <script>tooltip.pop('span1', 'Blah', {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 the tooltip is closed.

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 parent node (the containing block) of the element ('#contentElementId') is styled as "display:none;" so that the tooltip content is only visible when needed.
- Search engine friendly: Using this approach, your tooltip content will be crawled and indexed by search bot such as Google.
- It is easier to include rich HTML content in the tooltip by using this approach.
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.

Notice that 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 selector. See demo 3.

ajaxSettings
The ajaxSettings(optional) is set using the following format:
{ type: "GET" or "POST", context: dataObject, success: callbackName, fail: failedCallbackName, responseType: typeName } // Each of the setting is optional. // More details
The ajaxSettings parameter
- ajaxSettings is optional. If it is not defined, the data returned from server will be used directly as tooltip content.
  ajaxSettings include several settings, and each is optional.
  {
      type: HTTP request method,
      context: dataObject,
      success: callbackName,
      fail: failedCallbackName,
      responseType: typeName
  }
- type: "GET" or "POST". If not defined, The ajax request will be sent through the GET HTTP method in asynchronous mode.
- 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 has two arguments:
  - the data returned from the server, formatted according to the
  responseType parameter;
  - and the context object.
  The function will return a string value that will be used as the tooltip content.
  If success setting is omitted or set to null, the response will be directly used as the tooltip content.
  You can look at the source code of demo2.html in the download package to see how the success callback is used.
- 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.
Examples:
<img src="question.gif" onclick="tooltip.ajax(this, 'help/tip1.txt')" /> <input type="text" value="?" onfocus="tooltip.ajax(this, 'Tips.ashx?tipid=1', null, {position: 4, sticky:true, maxWidth: 900})" /> <a href="src/GetDataHandler.ashx?pid=6" onclick="return false;" onmouseover="tooltip.ajax(this, 'src/GetDataHandler.ashx?pid=6', {success: callback2, responseType: 'json'}, null)">Details</a> <script type="text/javascript"> function callback2(data) { return data.Img + "<b>" + data.Title + "</b><br/>" + data.Content; } </script>
If it takes a longer time to retrieve the Ajax data, a spinning image will show up in the tooltip.

Tooltip Options

You can configure the tooltip global options by modifying the var tooltipOptions in the tooltip.js.

Open the tooltip.js file with Notepad, and you can update each option:

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,
    cssClass: "",
    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 is applicable only 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 its position value is greater than 3.

smartPosition

true or false.

With its setting true, when it finds there is no enough space to show, the tooltip box will reposition itself to make it always viewable.

Note: The repositioning may cover some contents that users want to see. To avoid this, you can set the smartPosition option to false to disable the repositioning.

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 an image that is larger than the 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 the position option 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 the position option is 0 or 2, or close to the top if position is 1 or 3; setting it to 0.5 will make the callout stay in the middle.

cssClass:

Add a CSS class to the tooltip box element (DIV#mcTooltip).

Usually it is always set to a blank string "" here. It is only used when you want an individual tooltip instance to have a different style from the default ones, and in this case, you can pass a cssClass option to the tooltip launch method.

For details please refer to the Example 3 in the next section: Special Options for Individual Tooltip.

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:
- true: the tooltip will fade away when the overlay is clicked
- 1: you have to click the close button to cancel the tooltip.

license

Place to set your license key.

Please refer to License and Purchase for details.

Special Options for Individual Tooltip

Each individual tooltip instance can have its own special options which are different from the global options. To achieve this you just need to pass the option object into the tooltip trigger method (tooltip.pop or tooltip.ajax). Example 1 Example 2 Example 3

License and Purchase

License Fee: $20.00

License is required for using the tooltip widget.
Under local development environment(localhost server or local file path), you can use the license "64628" to disable the purchase reminder that comes out periodically.
The license is issued on a per-domain basis (valid for a domain and its sub-domains). Intranet domains and IP domains should also be licensed.
When you have acquired the license, open the tooltip.js file with Notepad, and update the license value accordingly. var tooltipOptions = { ......, license: "mylicense" };

FAQ about License

How the license works? Does it go to another web service to verify? Answer
Do I need a license for my dev and testing domain that is different from the final client's domain? Answer
Will it work for sub-domains? Answer
My website is on intranet. Do I need license for using your widgets in my intranet website? Answer
Do you provide developer license that can be applied to multiple websites? Answer
I have multiple domain names pointing to the same website. Can I apply multiple licenses to the same script? Answer
Do I need to renew the license for future upgrades/releases of the widget? Answer

You need to set the acquired license key to the license property in the widget's JavaScript file.

The JavaScript will use its own match pattern code to verify the license with the domain name on the browser's address bar. The JavaScript file will perform the validation by itself and no other services will be involved.

If the validation failed(the domain name doesn't match the license key), the UI component may periodically display a trial version alert, or even disable some functionalities.

The code is fully functional even if the script is not licensed (though it may periodically show a trial version alert). So usually you don't need the license in your dev phase.

If you are developing under the domain localhost, either the trial version alert will be disabled, or we have provided a license for the localhost that you can find in the License section of the product's main page.

Yes. If the license is valid for the main domain, it will also be valid for all its sub-domains(such as sub1.mydomain.com, sub2.mydomain.com).

Yes license is required for intranet domains, and you can enter your intranet domain into the For website box after clicking the Buy Now button.

No. It is on a per-domain basis only.

Yes, it is supported. The following links are the instructions:

For JS Image Slider For Ninja Slider For ddmenu For JS Tooltip

Note:

If your domain2.com will be redirected to your domain1.com, you only need a license for domain1.com. You don't need multiple licenses in this scenario.
If your multiple domains are obviously for the same site, such as menucool.com, menucool.net, menucool.com.us, you can input the regular price for the first domain, and input 1/2 of the price for the others.

No. The license will be valid forever as long as your domain is not changed.

If your domain name is changed, you need to purchase a separate license for the new domain.

Menucool Tooltip can get more use than you can imagine

Tooltip Menu: The tooltip can be used as navigation menu
Login (dummy)
demo 4: The tooltip can be controlled programmatically
Thumbnail Preview: The tooltip can be easily integrated into other Web UI widgets

Customize Tooltip Styles

You can easily customize the tooltip style through the tooltip.css file.

The tooltip markup is generated by the tooltip.js script. We'll show you the tooltip HTML structure which will help you use appropriate CSS selectors to style the tooltip:

<div id="mcTooltipWrapper"> 
    <div id="mcTooltip"> 
        <div class="mcTooltipInner"> 
            (Tooltip content)
        </div>
    </div>
    <div id="mcttCo"></div> 
    <div id="mcttCloseButton"></div> 
</div>
<div id="mcOverlay"></div>

1. tooltip.pop(targetElement, text [, options])

2. tooltip.pop(targetElement, '#contentElementId' [, options])

SEO Friendly

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

SEO-fiendly

Page fragment

Javascript Tooltip