Danbooru.PostTooltip = {}; Danbooru.PostTooltip.render_tooltip = function (event, qtip) { var post_id = $(event.target).parents("[data-id]").data("id"); $.get("/posts/" + post_id, { variant: "tooltip" }).then(function (html) { qtip.set("content.text", html); qtip.elements.tooltip.removeClass("post-tooltip-loading"); }); }; // Hide the tooltip the first time it is shown, while we wait on the ajax call to complete. Danbooru.PostTooltip.on_show = function (event, qtip) { if (!qtip.cache.hasBeenShown) { qtip.elements.tooltip.addClass("post-tooltip-loading"); qtip.cache.hasBeenShown = true; } }; Danbooru.PostTooltip.POST_SELECTOR = "*:not(.ui-sortable-handle) > .post-preview img"; // http://qtip2.com/options Danbooru.PostTooltip.QTIP_OPTIONS = { style: "qtip-light post-tooltip", content: Danbooru.PostTooltip.render_tooltip, overwrite: false, position: { my: "top left", at: "bottom left", target: "mouse", // `viewport: $(window)` is better, but it requires jquery-migrate until https://github.com/qTip2/qTip2/issues/797 is fixed. viewport: true, adjust: { mouse: false, y: 25, method: "shift", }, }, show: { solo: true, delay: 450, effect: false, ready: true, event: "mouseenter", }, hide: { delay: 50, fixed: true, effect: false, event: "unfocus mouseleave", }, events: { show: Danbooru.PostTooltip.on_show, }, }; Danbooru.PostTooltip.initialize = function () { $(document).on("mouseenter", Danbooru.PostTooltip.POST_SELECTOR, function (event) { if (Danbooru.PostTooltip.disabled()) { $(this).qtip("disable"); } else { $(this).qtip(Danbooru.PostTooltip.QTIP_OPTIONS, event); } }); // Hide tooltips when clicking thumbnails. $(document).on("click", Danbooru.PostTooltip.POST_SELECTOR, Danbooru.PostTooltip.hide); // Disable tooltips on touch devices. https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent Danbooru.PostTooltip.isTouching = false; $(document).on("touchstart", function (event) { Danbooru.PostTooltip.isTouching = true; }); $(document).on("touchend", function (event) { Danbooru.PostTooltip.isTouching = false; }); }; Danbooru.PostTooltip.hide = function (event) { $(".post-tooltip:visible").qtip("hide"); }; Danbooru.PostTooltip.disabled = function (event) { return Danbooru.PostTooltip.isTouching || Danbooru.meta("disable-post-tooltips") === "true"; }; $(document).ready(Danbooru.PostTooltip.initialize);