jquery плагин
с методами и опциями
HTML
<div class="tooltiped tooltiped1" data-title="подсказка">тара-пара</div>
<button onclick="$('.tooltiped1').tooltip('hide')">удалить</button>
<button onclick="$('.tooltiped1').tooltip('show')">показать</button>
<button onclick="$('.tooltiped1').tooltip('update', 'измененная подсказка')">изменить</button>
<div class="tooltiped tooltiped2" data-title="подсказка">тара-пара</div>
<div class="tooltiped tooltiped3" data-title="подсказка">тара-пара</div>
<div class="tooltiped tooltiped4" data-title="подсказка">тара-пара</div>
CSS
.tooltiped {
position: relative;
width: 80px;
height: 100px;
background: #dbdbdb;
margin-bottom: 20px;
}
.tooltip {
position: absolute;
top: 0;
left: 100%;
}
JavaScript
(function( $ ){
var defaults = {
tooltip_bg : 'fff000',
tooltip_width : '150px'
}
var methods = {
init : function(options) {
options = $.extend({}, defaults, options);
return this.each(function () {
var $_this = $(this),
width = options.tooltip_width,
title = options.title;
if (title) $_this.tooltip('update', title);
$_this.on('mouseover', function(){
$(this).tooltip('show', options);
}).on('mouseout', function() {
$(this).tooltip('hide');
})
});
},
show : function(options) {
options = $.extend({}, defaults, options);
return this.each(function () {
var $_this = $(this),
width = options.tooltip_width,
bg = options.tooltip_bg;
if ($_this.find('.tooltip').length) return;
$('<div class="tooltip">' + $_this.data('title') + '</div>').appendTo($_this).css({
'width' : width,
'background' : '#' + bg
});
});
},
hide : function() {
this.find('.tooltip').remove();
},
update : function( content ) {
this.data('title', content);
}
};
$.fn.tooltip = function(methodOrOptions) {
if ( methods[methodOrOptions] ) {
return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {
return methods.init.apply( this, arguments ); // по умолчанию вызываем метод init
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.tooltip' );
}
};
})( jQuery );
$('.tooltiped1').tooltip({ title : 'заданная подсказка1'...