$('.hastip').tooltipsy();
Show me
Style it however you like, but I’ll keep it simple
$('.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 me
How about 10px below?
$('.hastip').tooltipsy({
offset: [0, 10],
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 me
On the right?
$('.hastip').tooltipsy({
offset: [10, 0],
css: {
'padding': '10px',
'max-width': '100px',
'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 me
On the left?
$('.hastip').tooltipsy({
offset: [-10, 0],
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 me
Custom animation you say?
$('.hastip').tooltipsy({
offset: [-10, 0],
show: function (e, $el) {
$el.css({
'left': parseInt($el[0].style.left.replace(/[a-z]/g, '')) - 50 + 'px',
'opacity': '0.0',
'display': 'block'
}).animate({
'left': parseInt($el[0].style.left.replace(/[a-z]/g, '')) + 50 + 'px',
'opacity': '1.0'
}, 300);
},
hide: function (e, $el) {
$el.slideUp(100);
},
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 me
More extreme? How about falling from the sky
$('.hastip').tooltipsy({
offset: [0, -1],
show: function (e, $el) {
var cur_top = parseInt($el[0].style.top.replace(/[a-z]/g, '')) + 'px';
$el.css({
'top': (window.pageYOffset - $el.outerHeight()) + 'px',
'display': 'block'
}).animate({
'top': cur_top,
'opacity': '1.0'
}, 500, 'easeOutBounce').css('top', cur_top);
},
hide: function (e, $el) {
$el.animate({
'top': '+=200px',
'opacity': '0.0'
}, 200);
},
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 me
Or align it to the cursor 10px below and to the right
$('.hastip').tooltipsy({
alignTo: 'cursor',
offset: [10, 10],
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 me
Can it be.... AJAXified?
$('.hastip').tooltipsy({
content: function ($el, $tip) {
$.get('api.php', function (data) {
$tip.html(data);
});
return 'Fallback content';
},
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 me