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 = $('<ul id="tooltip" class="referencetooltip"></ul>');
		
		$tooltip
			.css("opacity", 0)
			.html('<li style="padding: 10px 8px">' + tipText + "</li>" 
					+ '<li style="margin: auto; margin-top: -2px;"></li>')
			.appendTo("body");
		
		var init_tooltip = function() {
			var windowWidth = $(window).width()
			  , thisWidth  = $this.outerWidth()
			  , thisHeight = $this.outerHeight()
			  , tooltipWidth  = $tooltip.outerWidth()
			  , tooltipHeight = $tooltip.outerHeight();
			
			if (windowWidth < tooltipWidth * 1.5)
				$tooltip.css("max-width", windowWidth / 2);
			else
				$tooltip.css("max-width", 340);
			
			var pos_left = $this.offset().left + thisWidth / 2 
					- tooltipWidth / 2
			  , pos_top = $this.offset().top - tooltipHeight 
					- $("#netbar").height();
			
			if (pos_left < 0) {
				pos_left = $this.offset().left + thisWidth / 2 - 20;
				$tooltip.addClass("left");
			} else $tooltip.removeClass("left");
			
			if (pos_left + tooltipWidth > windowWidth) {
				pos_left = $this.offset().left - tooltipWidth + thisWidth / 2 + 20;
				$tooltip.addClass("right");
			} else $tooltip.removeClass("right");
			
			if (pos_top < 0) {
				pos_top = $this.offset().top + thisHeight;
				$tooltip.addClass("top");
			} else $tooltip.removeClass("top");
			
			$tooltip
				.css({ left: pos_left, top: pos_top })
				.animate({ opacity: 1 }, 100);
		};
		
		init_tooltip();
		$(window).resize(init_tooltip);
		
		var remove_tooltip = function() {
			$tooltip.animate({ opacity: 0 }, 100, function() {
				$(this).remove();
			});
			$this.attr("title", tipText);
		};
		
		$this.bind("mouseleave", remove_tooltip);
		$tooltip.bind("click", remove_tooltip);
	});
});