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

Content from another element

Click me  

SEO Friendly

The tooltip content is from another element in the page. This approach is Search Engine Friendly.
 

Name:

<span class="tooltip" onmouseover="tooltip.pop(this, '#demo2_tip', {position:0, cssClass:'no-padding'})"> Content from another element </span> <div style="display:none;"> <div id="demo2_tip"> <img src="tooltip-head.jpg" /> <h3>SEO Friendly</h3> The tooltip content is from another element in the page. This approach 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 find its source code from demo2.html in the download package.

DOWNLOAD
Demos & Source Code v2016.12.12

Javascript Tooltip


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
Declared in script, such as:<a onclick="tooltip.pop(this,'Hello');">Hi</a>

An element on the page, such as <div id="div1">...(tooltip content)...</div> (div1 and its content will be used as the tooltip content):

<a onclick="tooltip.pop(this, '#div1');">Hi</a>

Usually those elements are placed inside a display:none wrapper:<div class="display:none;"> <div id="div1">...</div> <div id="div2">...</div> ...... </div>So that those tooltip contents are not visible unless required.

Tooltip can be populated with the content fetched from external files such as text document, XML document, or other web pages.

For example:

<input onfocus="tooltip.ajax(this, 'help/tip1.txt')" type="text" name="email" />

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.

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

Set an Individual Tooltip Instance to Display in Different Style

HTML: <a href="src/GetDataHandler.asp" onclick="return false;" onmouseover="tooltip.ajax(this, 'src/GetDataHandler.asp', {success: callback2, responseType: 'json'}, {calloutPosition: 0.5, cssClass: 'lessPadding'})">Hi</a> CSS: <style type="text/css"> #mcTooltip.lessPadding { padding: 5px; border-color: transparent; border-radius: 2px; background-color: rgba(0,0,0,0.5); box-shadow: none; } #mcTooltip.lessPadding .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, or the screen is touch-enabled device.)
Screen overlay (visible only when the option overlay is true or 1)

 

Your Name
+ =  

Question Title

If your question is about troubleshooting, please first go through the checking list in Troubleshooting Request.