Tooltip UI component for JavaScript and jQuery

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.

<html>
    <head>

        ...

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

    </head>
    <body>

        ...

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

    </body>
</html>
<html>
    <head>

        ...

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

    </head>
    <body>

        ...

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

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

- OR -

$.UltimaTip.hover(target, 'Hello World !!');
var tip = new UltimaTip(target, {

message: '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:

var options = {

    behavior: {

        hover:           false

    },

    css: {

        bubble: {

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

        },

        message: {

            className:   'foobar'

        }

    }

};
var options = {

    '->behavior.hover':         false,

    '->css.bubble.directions':  'center top',
    '->css.bubble.offset.y':     -16,

    '->css.message.className':  'foobar'

};
// setting the following options...

    UltimaTip.options = {

        '->animations.bubble.show.effect':  'none',
        '->css.bubble.directions':          'middle right'

    };

// ...will override the defaults with the specified properties for all future method calls

// setting the following options using the jQuery prefix...

    $.UltimaTip.options = {

        '->behavior.hover':  false

    };

// ...will additionally override defaults for all future jQuery wrapped method calls

− animations
bubble
show
effect	'fadeIn'	effect used to show the bubble
duration	400	duration of the hover-in effect
hide
effect	undefined	effect used to hide the bubble undefined: inherit value from show
duration	undefined	duration of the hover-out effect undefined: inherit value from show
− behavior
cursorDelay	200	time to delay tooltip repositioning when following the cursor (affects "directions: cursor" only)
hover	true	automatically 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 ] or 'cursor' (to make the bubble follow the cursor on hover)
offset
x	0	horizontal position offset of the bubble element
y	0	vertical position offset of the bubble element
zIndex	9100
< 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
onTipShowing	undefined	before showing the tip (UltimaTip) : return false to interrupt
onTipShown	undefined	after tip is fully shown (UltimaTip)
onTipHiding	undefined	before hiding the tip (UltimaTip) : return false to interrupt
onTipHidden	undefined	after tip is fully hidden (UltimaTip)

// Examples

You can test UltimaTip in your browser console as well.

$('#exampleSimple').UltimaTip('Once upon a time...');

- OR -

new UltimaTip('#exampleSimple', { message: 'Once upon a time...' });
$('#exampleSimple').UltimaTip('I am re-positioned every 200 ms...', { '->css.bubble.directions': 'cursor' });
$('#exampleStyled').UltimaTip(

    '<div>
        <p style="...">
            Good day!<br>How are you?
         </p>
         <img src="some.png" style="..." />
     </div>',

    {

        '->css.bubble.backgroundColor':  'rgba(85, 172, 238, 0.80)',
        '->css.bubble.border':           '2px solid White',
        '->css.bubble.borderRadius':     '16px',
        '->css.bubble.boxShadow':        '0px 0px 32px #9B64FF',
        '->css.bubble.color':            'White',
        '->css.bubble.padding':          '8px',

        '->css.bubble.directions':       'right',
        '->css.bubble.offset.x':         16

    }

);

- alternate option notation -

{
    css: {

        bubble: {

            backgroundColor:  'rgba(85, 172, 238, 0.80)',
            border:           '2px solid White',
            borderRadius:     '16px',
            boxShadow:        '0px 0px 32px #9B64FF',
            color:            'White',
            padding:          '8px',

            directions:       'right',
            offset: {
                x:            16
            }
        }

    }
}
new UltimaTip('#exampleClick', {

    message: 'Click again to hide me!',

    behavior: {
        hover: false
    },

    css: {
        bubble: {
            className: 'transparent',
            directions: 'bottom'
        }
    }

});

$('#exampleClick').click(function() {

    $(this).toggleHoverTip();
});
$('#exampleMultiple')

    .UltimaTip('North',  { '->css.bubble.directions': 'top'     })
    .UltimaTip('East',   { '->css.bubble.directions': 'right'   })
    .UltimaTip('South',  { '->css.bubble.directions': 'bottom'  })
    .UltimaTip('West',   { '->css.bubble.directions': 'left'    })

;
$('#exampleCallback').UltimaTip(

    'annoying alert is annoying',

    {

        animations: {
            bubble: {
                show: {
                    duration: 800
                }
            }
        },

        callbacks: {
            onTipShowing:  function() { alert('onTipShowing (use ENTER key)');  },
            onTipShown:    function() { alert('onTipShown');                    },
            onTipHiding:   function() { alert('onTipHiding');                   },
            onTipHidden:   function() { alert('onTipHidden');                   }
        }

    }

);

// License

// Download

Ultima Tip 0.5.0 10 KB