DEMO


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

Basic A little spice

<span class="tooltip" onmouseover="tooltip.pop(this, 'Lorem ipsum dolor...mauris')"> Basic </span> <span class="tooltip" onmouseover="tooltip.pop(this, '<span class=\'red\'>Hi</span> there', {position:0})"> A little spice </span>


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

Tootip content will come from an element's innerHTML in the page

Click me  

SEO Friendly

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

Name:

<span class="tooltip" onmouseover="tooltip.pop(this, '#demo2_tip')"> Tooltip content will... </span> <div style="display:none;"> <div id="demo2_tip"> <h2>SEO</h2> <img src="tooltips-cd3.jpg" 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>
<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"> <form action="javascript-tooltip" method="post"> Name: <input type="text" name="name" /> <input type="submit" value="Login" /> <input type="button" value="Cancel" onclick="tooltip.hide()" /> </form> </div> </div>

From this demo you can see the benefit of taking the #2 approach:

  • Easy to show rich HTML content
  • Search engine friendly
  • Allows any HTML content, even web forms.


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

Triggered by hijax link

Show HTML fragment from another page

<a class="tooltip" onclick="return false;" href="src/tooltip-ajax.html" onmouseover="tooltip.ajax(this, 'src/tooltip-ajax.html');" >Triggered by hijax link</a> <a href="src/tooltip-ajax.html#div2" onclick="return false;" onmouseover="tooltip.ajax(this, 'src/tooltip-ajax.html#div2');" >show HTML fragment from another page</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.

This demo is another tooltip.ajax() example that populates tooltip through an external XML document products.xml.

You can see its source code from demo2.html in the download package.

Javascript Tooltip

DOWNLOAD
Demos & Source Code v2014.9.16

Javascript Tooltip

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

  • Content Source

    Tooltip content can be held in script, borrowed from an
    HTML element on the page, or obtained from external documents or other web pages through Ajax.

  • HTML Content

    Menucool Tooltip can include images or any HTML content.

  • Cross-browser compatible

    The tooltip can be used in 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...

  • License Fee: $20.00
    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>
Tooltip can be populated with the content fetched from external files such as text document, XML document, or other web pages.

For example:

tooltip.ajax(this, 'help/tip1.txt')

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:
  1. tooltip.pop(targetElement, text[, options])
  2. tooltip.pop(targetElement, '#contentElementId' [, options])
  3. tooltip.ajax(targetElement, url[, ajaxSettings][, options])

Tooltip Options

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

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.

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

Set an Individual Tooltip Instance to Display in Different Style

HTML: <a href="/hi.html" onmouseover="tooltip.pop(this, 'Hi there', { calloutPosition: 0.5, cssClass: "lessPadding" })">Hi</a> CSS: <style type="text/css"> div#mcTooltip.lessPadding { padding: 5px; border-color: transparent; border-radius: 2px; background-color: rgba(0,0,0,0.5); box-shadow: none; } div#mcTooltip.lessPadding div.mcTooltipInner { background:none; } </style>

Cutomize Tooltip Styles will guide you how to use the CSS selectors.

License and Purchase

License Fee: $20.00

Menucool Tooltip can get more use than you can imagine


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>
Close button (visible only when the option sticky or overlay is true or 1)
Screen overlay (visible only when the option sticky is true or 1)

QUESTION & ANSWER
More ...

 

Your Name
Question Title
+ =  
Troubleshooting question? please read Troubleshooting Request before asking.