Flexibility without sacrificing simplicity.

Setting Possible Values Default Notes
alignTo 'element' or
'cursor'		 'element'
Aligns tooltip to element’s edges
offset [x, y] [0, -1]
Directly obove element (or cursor)		 Result is affected by alignTo setting.
content 'Custom tooltip content' ''
Uses element’s title attribute		 Useful for HTML inside tooltips since you can’t put HTML in title attributes
show function (event, $tooltip) function (e, $el) { $el.fadeIn(100); } Use any animation you want to display the tooltip
showEvent DOM event 'mouseenter' Perhaps you want a different DOM event to show the tooltip?
hide function (event, $tooltip) function (e, $el) { $el.fadeOut(100); } Use any animation you want to hide the tooltip
hideEvent DOM event 'mouseleave' Perhaps you want a different DOM event to hide the tooltip?
delay In milliseconds 200 Set to 0 for no delay
css {} or
object of css properties:values		 {}
Use CSS defined in a stylesheet		 Useful if you want to keep styles together with plugin settings
className Any string 'tooltipsy' In case .tooltipsy doesn’t work for you

Use all defaults

$('.hastip').tooltipsy();

Translates to…

$('.hastip').tooltipsy({
    alignTo: 'element',
    offset: [0, -1],
    content: '',
    show: function (e, $el) {
        $el.show(100);
    },
    hide: function (e, $el) {
        $el.fadeOut(100);
    },
	delay: 200,
    className: 'tooltipsy',
	css: {}
});

alignTo as 'element' or 'cursor'

// align tooltipsy relative to the hovered element
$('.hastip').tooltipsy({
    alignTo: 'element'
});

// align tooltipsy relative to the mouse as it hovers the element
$('.hastip').tooltipsy({
    alignTo: 'cursor'
});

offset as [x, y]

When alignTo == 'element'

// align tooltipsy directly above element
$('.hastip').tooltipsy({
    alignTo: 'element',
    offset: [0, -1]
});

// align tooltipsy directly below element
$('.hastip').tooltipsy({
    alignTo: 'element',
    offset: [0, 1]
});

// align tooltipsy directly to left of element
$('.hastip').tooltipsy({
    alignTo: 'element',
    offset: [-1, 0]
});

// align tooltipsy directly to right of element
$('.hastip').tooltipsy({
    alignTo: 'element',
    offset: [1, 0]
});

When alignTo == 'cursor'

// align tooltipsy 10px below and 10px right of cursor
$('.hastip').tooltipsy({
    alignTo: 'cursor',
    offset: [10, 10]
});

content as string

// use element's title attribute to generate the tooltip (default)
$('.hastip').tooltipsy({
    content: ''
});

// use HTML in your tooltip
$('.hastip').tooltipsy({
    content: '<em>Look ma</em>, my tooltip has <strong>HTML</strong>'
});

css as object

// use CSS defined separately in a stylesheet (default)
$('.hastip').tooltipsy({
    css: {}
});

// define CSS rules together with other settings
$('.hastip').tooltipsy({
    css: {
        'padding': '10px',
        'max-width': '200px',
        'color': '#303030',
        'background-color': '#f5f5b5',
        'border': '1px solid #deca7e',
        '-moz-box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
        '-webkit-box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
        'box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
        'text-shadow': 'none'
    }
});

show as function

// simply show the tooltip on hover
$('.hastip').tooltipsy({
    show: function (e, $el) {
        $el.show();
    }
});

// reveal the element vertically with jQuery’s slideDown()
$('.hastip').tooltipsy({
    show: function (e, $el) {
        $el.slideDown(300);
    }
});

showEvent as DOM event

// show the tooltip when an input gains focus
$('input').tooltipsy({
    showEvent: 'blur'
});

hide as function

// simply hide the tooltip on mouseleave
$('.hastip').tooltipsy({
    hide: function (e, $el) {
        $el.hide();
    }
});

// hide the element vertically with jQuery’s slideUp()
$('.hastip').tooltipsy({
    hide: function (e, $el) {
        $el.slideUp(300);
    }
});

hideEvent as DOM event

// hide the tooltip when an input loses focus
$('input').tooltipsy({
    hideEvent: 'blur'
});

delay as number of milliseconds

// show the tooltip with no delay
$('.hastip').tooltipsy({
    delay: 0
});

// wait a full second
$('.hastip').tooltipsy({
    delay: 1000
});

className as string

// set the class name for CSS styling as foo
$('.hastip').tooltipsy({
    className: 'foo'
});