Installation

Include the latest 3.x release of jQuery in your header, the jQuery CDN can be used for this.

Download Tipped and upload the files from the package to your server. Include tipped.js and tipped.css below jQuery.

<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="/js/tipped/tipped.js"></script>
<link rel="stylesheet" type="text/css" href="/css/tipped/tipped.css"/>

That's it! Tipped should now be ready for use.

= Note: The downloads have an example folder demonstrating the installation.

Creating Tooltips

Tipped.create can be used to create one or more tooltips at the same time. It accepts a CSS Selector or HTML Element as the first parameter:

$(document).ready(function() {
  Tipped.create('#demo-tooltip', 'Some tooltip text');
});
Hover me!

If no string is given as the second argument Tipped will look for it in the title attribute. By using this multiple tooltips can be created using a single CSS Selector:

<span class="simple-tooltip" title="First tooltip">I have a tooltip</span>
<span class="simple-tooltip" title="Second tooltip">I also have a tooltip</span>

<script type="text/javascript">
  $(document).ready(function() {
    Tipped.create('.simple-tooltip');
  });
</script>
I have a tooltip I also have a tooltip

Options

Additional Options can be provided as the last argument:

Tipped.create("#demo-options", "Options are awesome", { position: 'topleft' });
Options

Options can also be set on elements using the data-tipped-options attribute. Those options will overwrite the ones provided through Tipped.create:

<span class="x-small-tooltip" title="Red" data-tipped-options="skin: 'red'">Red</span>
<span class="x-small-tooltip" title="Green" data-tipped-options="skin: 'green'">Green</span>
<span class="x-small-tooltip" title="Blue" data-tipped-options="skin: 'blue'">Blue</span>

<script type="text/javascript">
  $(document).ready(function() {
    Tipped.create('.x-small-tooltip', { size: 'x-small' });
  });
</script>
Red Green Blue

When using the data-attribute it's important to ask yourself if you really need it. In the example above it would probably have been better to use a separate class and Tipped.create call for each color, that would avoid unnecessary styling in the markup and make the code more maintainable. We'll see more practical use of the data-tipped-options attribute when using Inline and Ajax tooltips.

More complex tooltips that define Callbacks are best created entirely through Tipped.create:

Tipped.create("#demo-options-callbacks", "This tooltip is a bit more advanced", {
  skin: 'light',
  position: 'topleft',
  close: true,
  hideOn: false,
  onShow: function(content, element) {
    $(element).addClass('highlight');
  },
  afterHide: function(content, element) {
    $(element).removeClass('highlight');
  }
});
Options & Callbacks

These examples only cover a few of the options that come with Tipped, see the documentation on options for all the available options.

= Note: Some options like skin and Callbacks are only available using Tipped Pro.

Inline

Anything on the page can be pulled into a tooltip by giving the inline option the id of the element to pull into the tooltip:

<span class='inline' data-tipped-options="inline: 'inline-tooltip-1'">Inline 1</span>
<div id='inline-tooltip-1' style='display:none'>Moved into the tooltip</div>

<span class='inline' data-tipped-options="inline: 'inline-tooltip-2'">Inline 2</span>
<div id='inline-tooltip-2' style='display:none'>Another one</div>

<script type="text/javascript">
  $(document).ready(function() {
    Tipped.create('.inline');
  });
</script>
Inline 1 Inline 2
= Note: Keep in mind that an id needs to be unique for a page to validate. Each element with an inline tooltip requires its own unique inline element. Since this element is moved into the tooltip and not cloned (that would invalidate the page) it cannot be reused.

Elements

Elements can be used as tooltip content, dynamically created or taken from the page. When taking elements from the page this works almost the same as using the inline option but without being restricted in using an id, so this approach has some advantages:

<span id='element-dynamic'>Dynamic</span>

<span id='element-inline'>Inline</span>
<div class='move-into-tooltip' style='display:none'>Moved into the tooltip</div>

<script type="text/javascript">
  $(document).ready(function() {
    Tipped.create('#element-dynamic', $('<i/>').html('Dynamically created'));
    Tipped.create('#element-inline', $('#element-inline').next('.move-into-tooltip')[0]);
  });
</script>
Dynamic Inline
= Note: As with the inline option elements are moved into tooltips, not cloned, so each tooltip requires a unique element. Should you need identical elements in tooltips make sure to create clones.

Functions

A function can be used as content for the tooltip. It should return the content to be pushed into the tooltip. The first argument within the function refers to the element the tooltip was created for:

<span id='function' data-content='Bold'>Function</span>

<script type="text/javascript">
  $(document).ready(function() {
    Tipped.create('#function', function(element) {
      return "<strong>" + $(element).data('content') + "<\/strong>";
    });
  });
</script>
Function

The return value of the function will be cached by default. The cache option can be used to disable this and call the function every time the tooltip is shown:

<span id='function-no-cache'>Function - No cache</span>

<script type="text/javascript">
  $(document).ready(function() {
    Tipped.create('#function-no-cache', function() {
      var random = Math.floor(Math.random() * 1000) + 1;
      return "Random number: " + random;
    }, {
      cache: false
    });
  });
</script>
Function - No cache

Instead of return a string an object can be used to set both title and content:

<span class='function' data-content="Some content" data-title="A title">Function 1</span>
<span class='function' data-content="This tooltip doesn't have a title">Function 2</span>

<script type="text/javascript">
  $(document).ready(function() {
    Tipped.create('.function', function(element) {
      return {
        title: $(element).data('title'),
        content: $(element).data('content')
      };
    }, {
      skin: 'light'
    });
  });
</script>
Function 1 Function 2

Ajax Pro only

The ajax option can be used to make Ajax requests, it accepts the same settings as jQuery.ajax(). A simple Ajax request that updates a tooltip would look like this:

<span id='ajax-example' data-tipped-options="ajax: { url: 'hello-world.php' }">Ajax</span>

<script type="text/javascript">
  $(document).ready(function() {
    Tipped.create('#ajax-example');
  });
</script>
Ajax

When using a success callback the tooltip won't automatically be updated with the response. This allows the response to be modified before proceeding with the update. Use return in the callback to update the tooltip with a modified response:

<span id='ajax-callback'>Ajax Callback</span>

<script type="text/javascript">
  $(document).ready(function() {
    Tipped.create('#ajax-callback', {
      ajax: {
        url: 'hello-world.php',
        success: function(data, textStatus, jqXHR) {
          return jqXHR.responseText + ', this is a modified response';
        }
      }
    });
  });
</script>
Ajax Callback
! Important: Using return within a success callback doesn't update the tooltip straight away. Use afterUpdate for a reliable callback after the tooltip has been updated.

Ajax request become more useful when sending along data with the request to modify the response on the server side:

<span class='ajax-artist' data-tipped-options="ajax: {
  data: { artist: 'norahjones' }
}">Norah Jones</span>
<span class='ajax-artist' data-tipped-options="ajax: {
  data: { artist: 'theglitchmob' }
}">The Glitch Mob</span>

<script type="text/javascript">
  $(document).ready(function() {
    Tipped.create('.ajax-artist', {
      ajax: {
        url: 'artist.php',
        type: 'post'
      },
      skin: 'light',
      size: 'large',
      radius: false,
      position: 'topleft'
    });
  });
</script>
Norah Jones The Glitch Mob
= Note: The above example uses data-tipped-options only for those options that are unique to elements, this helps avoid code repetition.

JSON Pro only

Since the ajax implementation makes it possible to modify the response before proceeding with the update it can also be used to handle JSON to create the content of a tooltip:

<span id='json-vimeo'>JSON - Vimeo</span>

<script type="text/javascript">
  $(document).ready(function() {
    Tipped.create('#json-vimeo', {
      ajax: {
        url: 'http://vimeo.com/api/oembed.json?url=http://vimeo.com/6428069&maxwidth=280&maxheight=280',
        success: function(data, textStatus, jqXHR) {
          return {
            title: data.title,
            content: data.html
          };
        }
      },
      close: true,
      hideOn: false,
      skin: 'light',
      radius: false,
      position: 'topleft'
    });
  });
</script>
JSON - Vimeo

Event Delegation Pro only

When there are a lot of tooltips on the page it'll make sense to use event delegation to lighten the load on the page. Tipped.delegate can be used for this, it doesn't create tooltips when called, instead it creates tooltips once an event is triggered that requires a tooltip to be shown.

Tipped.delegate accepts a CSS Selector, followed by optional content and/or options:

<span class='delegation-example' title="Created with event delegation">Delegation 1</span>
<span class='delegation-example' title="Another one">Delegation 2</span>

<script type="text/javascript">
  $(document).ready(function() {
    Tipped.delegate('.delegation-example', {
      skin: 'blue'
    });
  });
</script>
Delegation 1 Delegation 2

Even ajax tooltips can be created this way:

<span class='delegation-ajax' data-tipped-options="ajax: {
  data: { artist: 'norahjones' }
}">Ajax Delegation - Norah Jones</span>
<span class='delegation-ajax' data-tipped-options="ajax: {
  data: { artist: 'theglitchmob' }
}">Ajax Delegation - The Glitch Mob</span>

<script type="text/javascript">
  $(document).ready(function() {
    Tipped.delegate('.delegation-ajax', {
      ajax: {
        url: '/index/ajax/artist',
        type: 'post'
      },
      skin: 'light',
      radius: false,
      size: 'large',
      position: 'topleft'
    });
  });
</script>
Ajax Delegation - Norah Jones Ajax Delegation - The Glitch Mob

API Pro only

For more advanced use that goes beyond simply creating and removing tooltips see the documentation on the Javascript API.

<span class='api-example' title="1">One</span>
<span class='api-example' title="2">Two</span>
<span class='api-example' title="3">Three</span>

<script type="text/javascript">
  $(document).ready(function() {
    Tipped.create('.api-example', {
      size: 'x-small',
      skin: 'blue',
      showOn: false,
      hideOn: false
    });

    $('.api-example').on('mouseenter', function() {
      Tipped.show('.api-example');
    })
    .on('mouseleave', function() {
      Tipped.hide('.api-example');
    });
  });
</script>
One Two Three
×