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 $tooltip = $(					'' + 						'' + tipText + '' +						'' + 					''				); $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; // 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 horizontally if (screen_pos_left < 0) pos_left += (-screen_pos_left); else if (screen_pos_right > windowWidth) pos_left -= (screen_pos_right - windowWidth); if (screen_pos_top < 0) { //tooltip appears below element pos_top = thisTop + thisHeight - netbarHeight; }			$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); }); });