MediaWiki:Common.js/tooltips.js

// /* JavaScript tooltips usage: recommended usage: see [templates coming soon] raw usage: Place this where you want the button to appear: clickable place this elsewhere to define the content of the tooltip:  Content

span.js-tooltip-click - required attribute: data-tooltip-name - links to the corresponding divl; can have many with the same name content: the clickable thing, defaults to ? div.js-tooltip-wrapper - required attributes: data-tooltip-for - required; links this to spans with the data-tooltip-name equal to this data-tooltip-arrow - optional; yes for arrow, no/default for no arrow data-tooltip-arrow-size - optional; yes for arrow, no/default for no arrow data-tooltip-style - optional; the width of the arrow (height=2width) in px; also defines the gap between the tooltip and the span. defaults to 10 content: div.js-tooltip-text

div.js-tooltip-text - required contains: text/html to display inside tooltip

// every tooltip wrapper on the page considered separately $('.js-tooltip-wrapper').each(function {	var	$span,	$text,	$arrow,	$wrapper,	$close,	$test,	resizeEvent,	hasArrow,	style,	styles,	parsed_styles,	name,	size,	$currspan;	// setup vars	$wrapper = $(this);	name = $wrapper.attr('data-tooltip-for');	hasArrow = $wrapper.attr('data-tooltip-arrow').toLowerCase == 'yes';	style = $wrapper.attr('data-tooltip-style');	size = parseInt($wrapper.attr('data-tooltip-arrow-size'), 10);	if (typeof size !== 'number' || isNaN(size)) {		size = 10;	}	$text = $wrapper.find('.js-tooltip-text');	// setup wrapper css for movement	$wrapper.removeClass('hidden')		.css({ position: 'absolute', 'z-index': 900001, 'max-width': '80%', 'padding': '5px', border: '2px solid #428bb5', background: '#fff', 'box-shadow': '5px 5px 5px -2px #333', });	// setup span css	$span = $('span.js-tooltip-click[data-tooltip-name="' + name + '"]');	$span.removeClass('hidden')		.css({ color: 'white', background: 'gray', 'border-radius': '2em', border: '2px solid grey', cursor: 'pointer', padding: '0 0.3em', })		.attr('title', 'Click for explanation, click again to close');	if ($span.html === '') {		$span.text('?');	}	// setup arrow	$arrow = $(' ');	$arrow.addClass('js-tooltip-arrow')		.css({ position: 'absolute', top: ($wrapper.outerHeight * 0.3) + 'px', left: ('-' + (size+2) + 'px'), // width of arrow + width of text div border 'z-index': 900001, width: 0, height: 0, 'margin-top': ('-' + (size/2) + 'px'), 'border-color': 'transparent', 'border-style': 'solid', 'border-width': size + 'px', //actual width of the arrow });	// setup close button	$close = $(' ');	$close.html('')		.addClass('close wikia-chiclet-button')		.click(function{ $wrapper.hide; $currspan = null; })		.css({ float: 'right', });	$text.prepend($close);	// easiest way to deal with arrow is to just not add it if it isn't specified	if (hasArrow) {		$wrapper.prepend($arrow);	}	// setup resizem event for repositioning tooltips	resizeEvent = function {		if ($currspan == null) {			return;		}		var offset, width;		offset = $currspan.position;		width = $currspan.outerWidth;		$wrapper.css({ top: (offset.top - $wrapper.outerHeight*0.3) + 'px', });		$arrow.css({ top: ($wrapper.outerHeight * 0.3) + 'px', });		if (offset.left > 0.6 * $('#mw-content-text').width) {			$wrapper.css({ right: (($('#mw-content-text').width - offset.left) - 5 + size) + 'px', });			$arrow.css({ left: '', right: ('-' + (size+2) + 'px'), 'border-left-color': '#428bb5', 'border-right-width': 0, 'border-right-color': 'transparent', 'border-left-width': size + 'px', });		} else {			$wrapper.css({ left: (offset.left + width - 5 + size) + 'px', });			$arrow.css({ right: '', left: ('-' + (size+2) + 'px'), 'border-right-color': '#428bb5', 'border-left-width': 0, 'border-left-color': 'transparent', 'border-right-width': size + 'px', });		}	};	// attach resize event	$(window).resize(resizeEvent);	// attach click event to span	$span.click(function (event) { $this = $(event.currentTarget); if ($this.attr('data-is-currspan') == 'true') { // if the current span is clicked while the popup is open, close the popup $currspan = null; $this.removeAttr('data-is-currspan'); $wrapper.hide; } else { // else move and show the currently open popup $currspan = $this; $this.attr('data-is-currspan', true); $wrapper.show; resizeEvent; }	});	// add custom style	if (typeof style === 'string') {		// add css to a test element then change it, should automatically parse css		console.log(style);		$test = $(' ');		$test.css('display', 'none');		$test.css('display', );		style = $test.attr('style');		// turn into object to add to wrapper		if (style !== ) {			styles = style.split(';');			styles_parsed = {};			$.each(styles, function(i, v) { if (typeof v === 'string') { var arr = v.split(':'); if (typeof arr[1] === 'string' && arr[1].trim !== '') { styles_parsed[arr[0].trim] = arr[1].trim; }				}			});			$wrapper.css(styles_parsed);		}		$test.remove;	}	// finish up	$wrapper.hide;	$span.show;	$('#WikiaArticle').css('position','unset')		.parent.css('position','relative'); //move relative up a level to allow overlap });