MediaWiki:WdsTooltips.js

/* * @name: WdsTooltips * @author: 机智的小鱼君 (idea) * @author: KhangND (JS) * @desc: A custom tooltip based on WDS Dropdown, working on both mobile and desktop * @desc: This script repositions the tooltip to be inside the article container. */ (function {   var className = 'custom-tooltip > ',        l_aligned = 'wds-is-left-aligned',        r_aligned = 'wds-is-right-aligned',        flipped = 'wds-is-flipped',        container = '#WikiaArticle',        containerBound = {            left: $(container).offset.left,            right: $(container).offset.left + $(container).width,            bottom: $(container).offset.top + $(container).height        },        handlers = {            mouseenter: function {                var tip = $(this).parent.children('.wds-dropdown__content')[0];                var tipBound = {                    left: $(tip).offset.left,                    right: $(tip).offset.left + tip.offsetWidth,                    bottom: $(tip).offset.top + tip.offsetHeight                };                $(overflowBounds(tipBound, containerBound)).each(function(i, val) { switch (val) { case 'L': $(tip).addClass(l_aligned); break; case 'R': $(tip).addClass(r_aligned); break; case 'B': $(tip).parent.addClass(flipped); break; }               });            },            mouseout: function {                $(this).parent.removeClass(flipped);                $(this).parent.children('.wds-dropdown__content')[0].className = 'wds-dropdown__content';            }        }

function overflowBounds(tip, container) { var res = []; if (tip.left < container.left) res.push('L'); if (tip.right > container.right) res.push('R'); if (tip.bottom > container.bottom) res.push('B'); return res; }

$(className + '*').hover(handlers.mouseenter, handlers.mouseout); });