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:

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. Here's how to create multiple tooltips using a CSS Selector, the text of the tooltip is on the title attributes.

<span class="create-tooltip" title="first tooltip">I have a tooltip</span>
<span class="create-tooltip" title="second tooltip">I also have a tooltip!</span>

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

For more advanced tooltips an object containing a number of Options can be used as the last argument:

Tipped.create("#demo_options", "This tooltip is a bit more advanced", {
  skin: 'white',
  hook: 'topleft',
  hideOn: false,
  closeButton: true,
  onShow: function(content, element) { 
    $(element).css({'border': '1px solid #ff0000'});
  },
  onHide: function(content, element) { 
    $(element).css({'border': '1px solid #c7c7c7'});
  }
});

It's recommended to use Skins to create groups of options, this will make code more maintainable.

HTML Elements as tooltips

An element can be used instead of a string to set the content of the tooltip.

<span id='element-example'>HTML Element</span> 
<div id="element-example-tooltip" style="display:none">This element is moved into the tooltip</div>
    
<script type="text/javascript">
  $(document).ready(function($) {
    Tipped.create('#element-example', $('#element-example-tooltip')[0]);
  });
</script>

The element is moved into the tooltip upon creation, so each tooltip will require its own unique element. A bit of jQuery can be used to create multiple tooltips like this at once. A data-attribute is used on the element in the example below so the Javascript can use it to find the corresponding tooltip element:

<span class='tooltip-from-element' data-tooltip-id="tooltip-example-1">Tooltip from element 1</span> 
<div id='tooltip-example-1' style='display:none'>This element is moved into the tooltip</div>

<span class='tooltip-from-element' data-tooltip-id="tooltip-example-2">Tooltip from element 2</span> 
<div id='tooltip-example-2' style='display:none'>Another tooltip created with the same code</div>

<script type="text/javascript">
  $(document).ready(function($) {
    // loop over all elements creating a tooltip based on their data-tooltip-id attribute
    $('.tooltip-from-element').each(function() {
      var selector = '#' + $(this).data('tooltip-id');
      Tipped.create(this, $(selector)[0]);
    });
  });
</script>

Inline tooltips

Elements inline on the page can be used instead of a string by setting the inline option to true. The string then becomes the id of the element to pull into the tooltip. This method is basically the element as tooltip approach without walking the DOM.

<span id="demo_inline">Inline tooltip</span>

<div id="inline_content_1" style="display:none">
  <strong>This is pulled into the tooltip</strong>
</div>

<script type="text/javascript">
  $(document).ready(function() {
    Tipped.create('#demo_inline', 'inline_content_1', { inline: true });
  });
</script>

Ajax tooltips

Ajax tooltips are created by setting the ajax option to true. The string then becomes the url to fetch content from.

Tipped.create("#demo_ajax", "html_snippet.php", { ajax: true });

Data can be send along using POST instead of the default GET:

Tipped.create("#demo_ajax_options", "html_snippet.php", {
  ajax: { data: { id: 2 }, type: 'post' }
});

This basically means that the following value becomes available, assuming PHP is used:

<?php echo $_POST['id']; // will echo '2' ?>

If a title attribute is set the url can be ommited. An alternative to using the title attribute is the data-tipped attribute. Using this the url won't show up as a fallback text on browsers with Javascript disabled, so it might be preferred when using urls.

<span id="demo_ajax_url_on_element" data-tipped="html_snippet.php">Ajax url on element</span>

<script type="text/javascript">
  $(document).ready(function() {
    Tipped.create("#demo_ajax_url_on_element", { ajax: true });
  });
</script>

This can be taken further by combining the API with a bit of jQuery. Here's an example that grabs a querystring from a data-attribute when creating ajax tooltips:

<span class="tipped_ajax_example" data-tipped="html_snippet.php" data-querystring="id=1">Different</span>
<span class="tipped_ajax_example" data-tipped="html_snippet.php" data-querystring="id=2">Parameters</span>

<script type="text/javascript">
  $(document).ready(function($) {
    // loop over each element and create a tooltip using the data-attribute
    $('.tipped_ajax_example').each(function() {
      Tipped.create(this, {
        ajax: { data: $(this).data('querystring') }
      });
    });
  });
</script>

Advanced usage - The API

There's a lot more to Tipped then just creating tooltips, using the API you'll be able to cover pretty much any usecase. Let's say you wanted to create a tooltip with some information and have it show up for 5 seconds after the document has loaded.

<script type="text/javascript">
  $(document).ready(function() {
    Tipped.create('#login', "Click here to login").show();
    
    window.setTimeout(function() {
      Tipped.hide('#login');
    }, 5000);
  });
</script>

More information at http://projects.nickstakenburg.com/tipped/documentation/usage