מדיה ויקי:Gadget-tooltip.js

/*
 * This hidden gadget can be used as dependency 'ext.gadget.tooltip' in gadgets or by 'using' in scripts.
 * Its purpose is to create an elementary version of mouse tooltip.
 * The difference from the regular 'title' attribute is that this one works fine
 * on mobiles and tablets, in desktop version of the browser, using touch screen long click.
 * The code was created by applying the Extract Method Design pattern
 * on script 67, that was created by [[User:RoyTek]] and [[User:קיפודנחש]],
 * when the call in that script is delegating here now.
 * It's a good version of tooltip, allowing to use it
 * if there is no need in any extension of functionality.
 * Improved by [[User:קיפודנחש]] and [[User:IKhitron]].
 *
 * Usage:
 * <jquerydomelement>.createtooltip(<text>, <timetoappear>)
 * For example,
 * $('<span>').text('here').createtooltip('Hello, world', 500);
 * The second parameter is optional, while the default value is 1000.
 * If tooltip does not appear, try to add float:left or right to css of the dom element.
 */

if ( $.fn.tipsy !== undefined ) {
$.fn.createtooltip = function(text, time, gravity) {
	var cur = this, timeout = time || 1000, gravityvalue = gravity || $.fn.tipsy.autoNS, timer;
	return this.tipsy({
		gravity: gravityvalue,
		trigger: 'manual',
		title: function() {
			return text;
		},
		html: true,
		fade: true
	}).on('mouseover touchstart', function() {
		cur.tipsy('show');
		setTimeout(function() {
			cur.on('mouseover touchstart', function() {
					clearTimeout(timer);
				})
				.on('mouseout touchend', function(){
					timer = setTimeout(function(){
						cur.tipsy('hide');
					}, timeout);
				});
			}, timeout / 2);
	}).on('mouseout touchend', function() {
		setTimeout(function() {
			cur.tipsy('hide');
		}, timeout);
	});
};
}