Options

Options can be provided as the last argument when using Tipped.create:

Tipped.create('#example', 'Options!', { position: 'topleft' });
Example

Alternatively they can be set on elements using the data-tipped-options attribute:

<span id='example' data-tipped-options="position: 'topleft'">example</span>

Options defined with the data-attribute will overwrite those defined using Tipped.create.

= Note: The usage documentation has more examples explaining this.
  • ajax Pro

    Update the content of the tooltip with the response of an ajax requests, it accepts the same settings as jQuery.ajax():

    ajax: {
      url: 'example.php',
      type: 'post',
      data: { id: 204481 }
    }

    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:

    ajax: {
      url: 'example.json',
      success: function(data, textStatus, jqXHR) {
        return data.content + " modified!";
      }
    }

    Both the content and the title of the tooltip can be set this way:

    ajax: {
      url: 'example.json',
      success: function(data, textStatus, jqXHR) {
        return {
          title: data.title,
          content: data.content
        };
      }
    }

    Set the cache option to false to disable caching of the ajax request, this will create a new request each time the tooltip is opened.

    ajax: { url: 'example.php' },
    cache: false

    See the usage documentation on Ajax and JSON for more examples.

    ! 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.
  • behavior

    Load a number of preset options for common tooltip usecases. Other options defined on the tooltip will extend these presets. Possible behaviors are: hide, mouse and sticky.

    The hide behavior hides the tooltip on mouseenter:

    behavior: 'hide'
    hide

    With the mouse behavior the tooltip will follow the mouse and hide on mouseenter:

    behavior: 'mouse'
    mouse

    Using sticky the tooltip shows up at the initial mouse position and stays there. This is ideal for use on text to get a correct tooltip position even when an element has a linebreak.

    behavior: 'sticky'
    sticky

    Custom behaviors

    Behaviors are stored in Tipped.Behaviors. This allows custom behaviors to be added by extending it. If you every find yourself recycling groups of options, consider adding a behavior:

    // add a behavior
    $.extend(Tipped.Behaviors, {
      'custom-slow': {
        fadeIn: 600,
        fadeOut: 600
      }
    });
    
    // use it with the behavior option
    Tipped.create('#custom-behavior-slow', "Slowly!", {
      behavior: 'custom-slow',
      skin: 'light'
    });
    Custom Behavior
  • cache

    Can be used to disable caching for Ajax and Function based tooltips:

    cache: false
  • container

    Sets the element the tooltip is appended to, defaults to document.body:

    container: $('#scroll')[0]

    When given a selector string, an element will be searched for in the parent node tree up from the element the tooltip is attached to:

    container: '.scrolling-container'
    = Note: Parts of the tooltip will not be visible if the container element has hidden overflow. This can be somewhat avoided by also using the containment option to attempt to keep the tooltip within the container.
    = Note: Tooltips use position:absolute to position themselves within the container, so the container element will have to allow for absolute positioning. It might be needed to set position:relative or position:absolute on the container itself.
  • containment

    Tooltips are kept within the viewport, this can be disabled with the containment option:

    containment: false

    Set padding to change the padding between the tooltip and the edges of the viewport:

    containment: { padding: 5 }

    Use selector to keep the tooltip within a specific element. This has to be a CSS selector pointing to an element in the parent node tree up from the element that has the tooltip attached to it.

    containment: {
      selector: '#page',
      padding: 0
    }
  • close

    Shows a close button when set to true, combined with the hideOn option it can be used to create a tooltip that only closes itself with this button:

    close: true,
    hideOn: false
    close

    When the tooltip has a title the close button will be moved into the title bar. The title bar can also be enabled without a title:

    close: true,
    hideOn: false,
    title: true
    close - title

    Setting the close option to 'overlap' creates a close button that overlaps the tooltip content:

    close: 'overlap',
    hideOn: false
    close - overlap

    Elements within a tooltip with the class close-tooltip will automatically become a close button.

    <a href='javascript:;' class='close-tooltip'>click to close</a>
    'close-tooltip'
  • detach

    Tooltips are detached from the body element once hidden. Setting detach to false will keep them attached even when hidden.

    detach: false
  • fadeIn

    The duration of the fadein effect in miliseconds.

    fadeIn: 200
  • fadeOut

    The duration of the fadeout effect in miliseconds.

    fadeOut: 200
  • fixed

    When set to true the tooltip won't follow the mouse and stay in its initial position, it's useful when combined with the mouse as target:

    fixed: true,
    target: 'mouse'
  • hideAfter

    Hides the tooltip after a delay in miliseconds of not hovering the tooltip or its element:

    hideAfter: 2000
  • hideDelay

    A delay in miliseconds before the tooltip hides.

    hideDelay: 25
  • hideOn

    An event that triggers the tooltip to hide.

    hideOn: 'click'

    For more control this can also be an object that sets events for the element and tooltip:

    hideOn: {
      element: 'mouseleave',
      tooltip: 'mouseenter'
    }

    Set this option to false to disable hiding the tooltip through events:

    hideOn: false
  • hideOnClickOutside

    When set to true the tooltip will hide after a click outside of it or its element:

    hideOnClickOutside: true
  • hideOthers

    Hides all visible tooltips before showing the tooltip when set to true.

    hideOthers: true
  • inline

    Sets the id of an element to pull into the tooltip.

    inline: 'pull-into-tooltip'

    See the usage documentation on Inline for a more detailed explanation with examples.

  • maxWidth

    Sets the maximum width of the tooltip content.

    maxWidth: 200
  • offset

    Can be used to set x and/or y offset of the tooltip.

    offset: { y: -5 }
    offset: { x: 10, y: 5 }
    = Note: It's recommended to use the position option and only use offset when further tweaking is needed.
  • padding

    Disables the padding defined in CSS when set to false, enabled by default.

    padding: false
  • position

    Sets the position of the tooltip in relation to its target.

    Possible values are: 'topleft', 'top', 'topright', 'righttop', 'right', 'rightbottom', 'bottomleft', 'bottom', 'bottomright', 'lefttop', 'left' and 'leftbottom'.

    position: 'topleft'

    For more advanced positioning you can set the position based on how the tooltip and its target are connected:

    position: {
      target: 'bottom',
      tooltip: 'topleft'
    }
  • radius

    Disables the border-radius defined in CSS when set to false, enabled by default.

    radius: false
  • shadow

    Disables the shadow defined in CSS when set to false, enabled by default.

    shadow: false
  • showDelay

    A delay in miliseconds before the tooltip appears, by default this is set to a slight delay so tooltips don't instantly appear when moving the mouse over the page:

    showDelay: 75
  • showOn

    An event that triggers the tooltip to show.

    showOn: 'click'

    For more control this can also be an object that sets events for the element and tooltip:

    showOn: {
      element: 'mouseenter',
      tooltip: 'mouseenter'
    }

    Set this option to false to disable showing the tooltip through events.

    showOn: false
  • size

    Adjusts the tooltip to one of the following sizes: 'x-small', 'small', 'medium' or 'large'.

    size: 'x-small'

    See the documentation on Skins for examples on how to add custom sizes.

  • skin Pro

    Sets a skin for the tooltip. If any options have been defined for this skin they will be used as the starting options for the tooltip. All other given options will extend those.

    Possible values: 'dark', 'light', 'gray', 'red', 'green', 'blue', 'lightyellow', 'lightblue' and 'lightpink'.

    skin: 'light'

    See the documentation on Skins for examples on creating and using skins.

    = Note: The light version of Tipped supports only the default skin. Tipped Pro supports every skin and allows you to make custom skins.
  • stem

    Disables the stem when set to false.

    stem: false
  • spinner

    A spinner is shown while ajax requests are loading or when Tipped is waiting for images within the tooltip content to finish loading. It can be disabled by setting this option to false:

    spinner: false
    = Note: The spinner is only shown in browsers that support CSS animations, other browser don't support it.
  • target

    Defines where the tooltip will appear. Possible values for target are 'element', 'mouse' or an HTMLElement.

    target: 'mouse'
    target: $('#different-element')[0]
  • title

    Can be used to enable the title bar and optionally set a title to go with it.

    title: true
    title: "I have a title"
    Title
  • voila

    Can be used to disable Voilà, possibly speeding up display of a tooltip with images when its content has fixed dimensions set.

    Voilà is enabled by default, this can add a delay as it waits for images in the tooltip to finish loading, but makes sure that the tooltip shown has proper dimensions.

    By disabling Voilà the tooltip will no longer wait for images to load, it will show up faster initially but can have incorrect dimensions. You will have to make sure that tooltip content has proper dimensions set, only then can Voilà safely be disabled.

    voila: false
    = Tip: To have the benefit of Voilà without showing a loading icon as it waits consider using spinner:false instead.
  • zIndex

    By default no zIndex is set. This will have all tooltips increment their z-index starting from the default 999999 or the z-index set by Tipped.setStartingZIndex.

    If you need control over the z-index you can set it using this option. Setting zIndex makes the z-index of the tooltip static. This disables the default behavior where tooltips increment z-index when they get focus.

    zIndex: 1500000

Contents

* Pro Only

×