KokoroSenshi (talk | contribs) m (typo) |
KokoroSenshi (talk | contribs) m (Refactor the tooltip element creation for variables for the tooltip li elements) |
||
Line 11: | Line 11: | ||
$this.removeAttr("title"); |
$this.removeAttr("title"); |
||
+ | |||
⚫ | |||
⚫ | |||
var $tooltip = |
var $tooltip = |
||
⚫ | |||
− | $( |
||
+ | .append($tooltipText) |
||
⚫ | |||
+ | .append($tooltipCaret); |
||
⚫ | |||
⚫ | |||
− | '</ul>' |
||
− | ); |
||
$tooltip |
$tooltip |
Revision as of 03:07, 15 April 2018
// 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();
// 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);
});
});