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 = $('' + tipText + '') , $tooltipCaret = $(''); var $tooltip = $('') .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 //TODO: issue with half pixel rounding^? // 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 , caret_margin_left = caretMarginLeft; // 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); caret_margin_left -= (-screen_pos_left); } else if (screen_pos_right > windowWidth) { pos_left -= (screen_pos_right - windowWidth); caret_margin_left += (screen_pos_right - windowWidth); }			if (screen_pos_top < 0) { //tooltip appears below element pos_top = thisTop + thisHeight - netbarHeight; $tooltip.addClass("RTflipped"); }			$tooltipCaret .css("margin-left", caret_margin_left); //note that this will override "margin: auto" set earlier on			$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); }); });