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.

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');
});

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>

Options

Additional Options can be provided as the last argument:

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

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>

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');
  }
});

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

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>

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>

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>

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>

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>

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>

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

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>

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>

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>