JavaScript Tooltip

The tooltip supports flexibility in how it is triggered, closed, and how its content is loaded:

• Triggering: The tooltip can be opened by any events such as onmouseover, onclick, onfocus, or setTimeout.
• Closing: The tooltip can be closed in different ways, depending on the sticky or overlay option settings shown below. You can also call the tooltip.hide() method programmatically.
• Content loading: The tooltip also provides several ways to load its content, as shown in the following three methods:

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

  Basic A little spice view code

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

  Content from another element view code

  Click me   view code

  

  Rich HTML content

  The tooltip displays content from another element on the page.

  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" />
          <div style="padding: 20px">
              <h3>Rich HTML content</h3>
              <p>The tooltip displays content from another element on the page.</p>
          </div>
      </div>
  </div>

  <a href="#" onclick="tooltip.pop(this, '#demo3_tip', {overlay:1, 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>

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

  Load all content from another page

  Load page fragment from another page view code

  <span class="tooltip"
      onmouseover="tooltip.ajax(this, 'src/tooltip-ajax.html')">
      Load all content from another page
  </span>
  
  <span class="tooltip"
      onmouseover="tooltip.ajax(this, 'src/tooltip-ajax.html#div2')">
      Load page fragment from another page
  </span>
      

  view code

  <script type="text/javascript">
      var myAjaxSetting = {
          context: { index: -1 },
          success: myCallback,
          responseType: 'json',
      };
      function myCallback(response, context) {
          var x = JSON.parse(response).catalog[context.index];
          var title = x.title;
          var artist = x.artist;
          var price = x.price;
          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>
  
  <img
      src="src/tooltips-cd1.jpg"
      onmouseover="myAjaxSetting.context.index = 1; tooltip.ajax(this, 'src/products.json', myAjaxSetting, { position:0, effect:'slide' });"
  />
  ...(The 2nd and 3rd <img> tags are omitted for brevity.)
  <img
      src="src/tooltips-cd4.jpg"
      onmouseover="myAjaxSetting.context.index = 4; tooltip.ajax(this, 'src/products.json', myAjaxSetting, { position:0, effect:'slide' });"
  />

  targetElement: the element from which the tooltip is launched. In most cases, it is the element that triggers the tooltip, and is therefore represented by the JavaScript keyword this. However, you can also specify a different element or provide the ID of another element (then the opened tooltip will be positioned relative to that element).

  text: The text or HTML to be displayed by the tooltip.

  options(optional): the tooltip.js contains the global tooltip options (check the Tooltip Options section for details).

  You can override any of the options 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:2});</script>

  #contentElementId: When the tooltip is triggered, the element with id="contentElementId" will be moved into the tooltip box. Once the tooltip is closed, the element is returned to its original containing block.

  In case you need to use only the element's inner HTML content (without moving the element itself), prefix its ID with a double hash (##contentElementId). In this case, the element's innerHTML will be copied into the tooltip instance instead of being relocated.

  In most cases, the parent container of the element #contentElementId is styled with display: none; so that the tooltip content remains hidden until it is needed.

  The tooltip.ajax() function loads the tooltip with content retrieved from an external document. If it is a cross-domain request, CORS must be enabled for your domain.

  url

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

  ajaxSettings

  Optional request/response settings. If omitted, the server response is used directly as tooltip content.

  {
      type: "GET" or "POST", // Optional. The HTTP request method. Default is "GET".
      context: dataObject, // Optional. A key/value pair object sent as request payload data, which is also passed to the success callback.
      success: callbackName,  // Optional. The callback function that receives the response data and the context object as arguments. If not defined, the data returned from server will be used directly as tooltip content.
      fail: failedCallbackName, // Optional. The callback function that is called if the request fails.
      responseType: typeName // Optional. The expected response data type: "text"(default), "xml", "json", or "html".
  }
  

  For more details, see the demos below or review the code in the download package.

  If retrieving the Ajax data takes longer, a loading spinner will appear inside the tooltip.

Tooltip Options

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

Note: To set different options for an individual tooltip, pass a specific options object when opening it, as shown in the demos above.

var tooltipOptions=
{
    position: 1,
    smartPosition: false,
    maxWidth: 500,
    sticky: false,
    overlay: false,
    // In most cases, you don't need to change the following options.
    relativeTo: "element",
    cssClass: "",
    offsetX: 0,
    offsetY: 0,
    calloutPosition: 0.3,
    calloutSize: 20,
    showDelay: 150,
    hideDelay: 300,
    effect: "slide",
    duration: 200
};

Customize Styles

You can modify tooltip.css directly to change the appearance of all tooltips globally.

If you want to apply custom styling to a specific tooltip only, pass the cssClass option when opening it. The specified class will be added to the div#mcTooltip element.

To better understand how the styles can be customized, refer to the sample tooltip markup below, which is generated by the tooltip.js script.

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