User:KokoroSenshi/common.js

// Original by Osvaldas Valutis: http://web.archive.org/web/20180306004159/https://osvaldas.info/elegant-css-and-jquery-tooltip-responsive-mobile-friendly

$(function() {
	
	$(".explain, .tooltip").bind("mouseenter", function() {
		
		var $this = $(this)
		  , tipText = $this.attr("title");
		
		if (!tipText || tipText === "") return false;
		
		$this.removeAttr("title");
		
		var $tooltipText = '<li style="padding: 10px 8px">' + tipText + '</li>'
		  , $tooltipCaret = '<li style="margin: auto; margin-top: -2px;"></li>';
		
		var $tooltip = 
			$('<ul id="tooltip" class="referencetooltip"></ul>')
				.append($tooltipText)
				.append($tooltipCaret);
		
		$tooltip
			.css("opacity", 0)
			.appendTo("body");
		
		var display_tooltip = function() {
			var windowWidth = $(window).width()
			  , thisWidth  = $this.outerWidth()
			  , thisHeight = $this.outerHeight()
			  , thisTop  = $this.offset().top
			  , thisLeft = $this.offset().left
			  , tooltipWidth  = $tooltip.outerWidth()
			  , tooltipHeight = $tooltip.outerHeight()
			  , netbarHeight = $("#netbar").height()
			  , thisScreenPos = $this[0].getBoundingClientRect();
			
			$tooltip.css(
					"max-width",
					(windowWidth < 1.5*tooltipWidth) ? 0.5*windowWidth : 340
			);
			tooltipWidth = $tooltip.outerWidth();
			var caretMarginLeft = 0.5*tooltipWidth - 7 // 7 is from element inspecting the reference tooltips, equals(?) like the width of the caret
			
			// default position for tooltip is centered above the element
			var pos_left = thisLeft + 0.5*thisWidth - 0.5*tooltipWidth
			  , pos_top  = thisTop - tooltipHeight - netbarHeight // It's annoying taking the netbar into account
			  , screen_pos_left  = thisScreenPos.left + 0.5*thisWidth - 0.5*tooltipWidth
			  , screen_pos_right = screen_pos_left + tooltipWidth
			  , screen_pos_top  = thisScreenPos.top - tooltipHeight - netbarHeight;
			
			// TODO: first ensure the tooltip width is thinner than the window,
			// or at least take it into account when shifting left/right based
			// on screen_pos_left/right
			// TODO: Currently assumes the tooltip fits screen horizontally
			if (screen_pos_left < 0) {
				pos_left += (-screen_pos_left);
				$tooltipCaret.css("margin-left", caretMarginLeft - (-screen_pos_left) );
			} else if (screen_pos_right > windowWidth) {
				pos_left -= (screen_pos_right - windowWidth);
				$tooltipCaret.css("margin-left", caretMarginLeft + (screen_pos_right - windowWidth) );
			}
			
			if (screen_pos_top < 0) {
				//tooltip appears below element
				pos_top = thisTop + thisHeight - netbarHeight;
				$tooltip.addClass("RTflipped");
			}
			
			$tooltip
				.css("left", pos_left)
				.css("top", pos_top)
				.animate({ opacity: 1 }, 100);
		};
		
		var remove_tooltip = function() {
			$tooltip.animate({ opacity: 0 }, 100, function() {
				$(this).remove();
			});
			$this.attr("title", tipText);
		};
		
		display_tooltip();
		
		$(window).resize(display_tooltip);
		$this.bind("mouseleave", remove_tooltip);
		$tooltip.bind("click", remove_tooltip);
		
	});
	
});