API

The API can be used to generate and control tooltips through Javascript.

  • Tipped.clearAjaxCache Pro

    Clears the ajax cache for all tooltips, a new request will be made the next time they're shown.

    Tipped.clearAjaxCache();
  • Tipped.create

    Creates one or more tooltips using a CSS Selector or an HTMLElement. This method returns a Collection that allows chaining of show, hide, toggle, disable, enable, refresh and remove.

    See the usage documentation for more details and examples on using this method.

    $(document).ready(function() {
      var collection = Tipped.create(".tipped");
      setTimeout(function(){
        collection.show();
      }, 5000);
    });
    ! Important: When using Tipped Light the collection only supports the remove method.
  • Tipped.delegate Pro

    Use event delegation to create tooltips based on a CSS Selector, this will work even for elements added to the page later on.

    Tipped.delegate('.tipped', { position: 'topleft' });

    See the usage documentation for more details and examples on using this method.

    = Note: Methods like Tipped.show don't work on delegated tooltips because they're not created right away. Delegated tooltips are created once an event is triggered that would show them. Use Tipped.create to create tooltips that are immediately accessible to other API methods.
    = Note: Use Tipped.undelegate to stop delegation.
  • Tipped.disable Pro

    Disables tooltips, making it impossible to show or hide them.

    Tipped.disable('.tipped');
  • Tipped.enable Pro

    Enable tooltips previously disabled with Tipped.disable.

    Tipped.enable('.tipped');
  • Tipped.findElement

    Returns the element for which the tooltip was created when given a tooltip element or any element within that tooltip.

    var element = Tipped.findElement($("#element-within-tooltip")[0]);

    The methods get, show, hide, toggle, refresh and remove all use Tipped.findElement() internally so you can do the following within a tooltip:

    <span onclick="Tipped.hide(this);">click to close</span>
  • Tipped.get

    Retrieves a collection off tooltips created through Tipped.create using a CSS Selector or HTMLElement.

    Tipped.create("#content .tipped");
    var collection = Tipped.get('#content .tipped');
    collection.show();
  • Tipped.hide Pro

    Hides one more tooltips using a CSS Selector or HTMLElement.

    Tipped.hide('#some-element');

    Giving this method an element within a tooltip that doesn't have its own tooltip will also hide the tooltip:

    Tipped.hide($('#element-within-tooltip')[0]);
  • Tipped.hideAll Pro

    Hides all tooltips.

    Tipped.hideAll();
  • Tipped.init

    Restores Tipped to its initial state, removing all tooltips in the process.

    Tipped.init();
  • Tipped.refresh

    Forces a refresh of one or more tooltips, this will update dimensions and reposition them:

    Tipped.refresh('#some-element');

    Giving this method an element within a tooltip that doesn't have its own tooltip will also cause the tooltip to refresh:

    Tipped.refresh($('#element-within-tooltip')[0]);

    Not using any parameters will refresh all visible tooltips:

    Tipped.refresh();
    = Note: If a tooltip contained images that haven't been rendered yet a spinner will be shown while waiting for the images to finish rendering.
  • Tipped.remove

    Removes one or more tooltips using a CSS Selector or HTMLElement.

    Tipped.remove('#content .tipped');
  • Tipped.setDefaultSkin Pro

    Sets a different default skin.

    Tipped.setDefaultSkin('light');
  • Tipped.setStartingZIndex

    Sets the default starting z-index for all tooltips, the default is 999999.

    Tipped.setStartingZIndex(999999);
  • Tipped.show Pro

    Shows one or more tooltips using a CSS Selector or HTMLElement.

    Tipped.show('#some-element');

    The CSS Selector makes it easy to target groups of tooltips.

    Tipped.show('.story span.tipped');
  • Tipped.toggle Pro

    Toggle display of a tooltip, accepts a CSS Selector or HTMLElement.

    Tipped.toggle('#toggle-me');
  • Tipped.undelegate Pro

    Stop delegation started with Tipped.delegate.

    Tipped.undelegate('.tipped');
  • Tipped.visible Pro

    Returns true if a given element has a visible tooltip, or when given a CSS selector it will return the amount of visible tooltips.

    if (Tipped.visible('#some-element')) {
      // do something
    }
    var visibleCount = Tipped.visible('.has-tooltip');

    When no arguments are given the amount of visible tooltips on the entire page is returned:

    console.log('There are ' + Tipped.visible() + ' visible tooltips on the page');

Contents

* Pro Only

×