Ultima Tip

Ultima Tip is a simple yet advanced tooltip component written in JavaScript, using only jQuery core functionalities. Some of the features are:

  • attach tool tips to any element
  • tool tip content can be plain text or DOM elements (HTML)
  • supports multiple tool tips on the same element
  • offers animations
  • offers easy-to-use shorthand options and methods
  • offers callbacks and interrupts
  • does not require you to add HTML, CSS or images
  • does not require additional JavaScript libraries other than jQuery 1.4+
  • is browser backwards compatible down to Internet Explorer 8

// Documentation

    // Include

    You can place the UltimaTip script include basically wherever you want, just make sure that jQuery is loaded before. jQuery is required and must be at least version 1.4 to work with Ultima Tip. Remember to pick jQuery 1.x if you need support for Internet Explorer ≤ 8, otherwise pick 2.x or 3.x.

    1. body
    2. head
    1. <html>
          <head>

              ...

              <script src="jquery.js"></script>

          </head>
          <body>

              ...

              <script src="jquery.ultima.tip.js"></script>

          </body>
      </html>

    // Initialization

    You can create an instance of the UltimaTip class by using the native new operator (explicit) or the available jQuery wrapper methods (implicit). The tooltip will automatically appear on mouseenter and disappear on mouseleave (a.k.a. hover) by default.

    1. implicit
    2. explicit
    1. $(target).UltimaTip('Hello World !!');

      - OR -

      $.UltimaTip.hover(target, 'Hello World !!');

    // Constructors

    Note: You can also use the $ alias instead of the fully qualified jQuery.

    • new UltimaTip ( target, options ) : UltimaTip
      native object constructor, manual method invocation required
    • jQuery.UltimaTip ( message, options ) : jQuery
      e.g. $('#foo').UltimaTip('Hello World !!');
      considers the preceding jQuery object as (hover) target and passes it to a newly created instance of UltimaTip, invokes the hover() method
    • jQuery.UltimaTip.hover ( target, message, options ) : UltimaTip
      creates an instance of UltimaTip and invokes the hover() method

    // Methods

    Note: The highlighted UltimaTip refers to an instance of UltimaTip while the non-highlighted refers to the static namespace.

    • UltimaTip.hover ( )
      shows the tooltip
    • UltimaTip.unhover ( )
      hides the tooltip
    • UltimaTip.remove ( )
      removes (detaches) the tooltip
    • UltimaTip.get ( target ) : UltimaTip
      returns the first tip attached to the specified target
    • UltimaTip.get ( index ) : UltimaTip
      returns the tip at the specified index
    • UltimaTip.getIndex ( target ) : number
      returns the index of the first tip attached to the specified target
    • UltimaTip.remove ( target ) : number
      removes all tips attached to the specified target, returns the number of tips removed
    • UltimaTip.clear ( ) : number
      removes all tips, returns the number of tips removed
    • jQuery.UltimaTip.unhover ( target ) : number
      removes (detaches) the tooltip(s) from the specified target, returns the number of tips removed
    • jQuery.hoverTip ( ) : jQuery
      e.g. $('#foo').hoverTip();
      triggers the attached tip of the preceding jQuery object, invokes the hover() method
    • jQuery.unhoverTip ( ) : jQuery
      e.g. $('#foo').unhoverTip();
      triggers the attached tip of the preceding jQuery object, invokes the unhover() method
    • jQuery.toggleHoverTip ( ) : jQuery
      e.g. $('#foo').toggleHoverTip();
      triggers the attached tip of the preceding jQuery object, invokes either the hover() method or the unhover() method

    // Options

    Note: The options object is deeply structured, consisting of several sub-objects (nested objects). There are two notations available:

    1. verbose (native)
    2. shorthand (resolved)
    3. changing defaults
    1. var options = {

          behavior: {

              hover:           false

          },

          css: {

              bubble: {

                  directions:  'center top',
                  offset: {
                      y:       -16
                  }

              },

              message: {

                  className:   'foobar'

              }

          }

      }
      ;
    animations
    bubble
    show
    effect'fadeIn'effect used to show the bubble
    duration400duration of the above effect
    hide
    effectundefinedeffect used to hide the bubble
    undefined: inherit value from show
    durationundefinedduration of the above effect
    undefined: inherit value from show
    behavior
    hovertrueautomatically attach hover event to target
    css
    bubble
    className''class added to the bubble element
    directions'bottom right'anchoring position of the bubble element
    can be any combination of the following terms:
    [ left, center, right ] and [ bottom, middle, top ]
    offset
    x0horizontal position offset of the bubble element
    y0vertical position offset of the bubble element
    zIndex9100
    < css property >any CSS property, will be set as inline style
    message
    className''class added to the message element
    < css property >any CSS property, will be set as inline style
    callbacks
    onTipShowingundefinedbefore showing the tip
    (UltimaTip) : return false to interrupt
    onTipShownundefinedafter tip is fully shown
    (UltimaTip)
    onTipHidingundefinedbefore hiding the tip
    (UltimaTip) : return false to interrupt
    onTipHiddenundefinedafter tip is fully hidden
    (UltimaTip)

    // Examples

    You can test UltimaTip in your browser console as well.

    1. simple tooltip
    2. styled tooltip
    3. tooltip on click
    4. multiple tooltips
    5. alert on each callback

    // License

    MIT, Copyright (c) 2014-2018 Alexander Kwaschny, kwaschny.net

    // Download