MediaWiki:Gadget-Tooltip.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

mw.hook('wikipage.content').add(() => {
	// add class to body as hook for any further styling or detection
	document.body.classList.add('gadget-toggle-tooltip');
});

// Auto-positioning of floating tooltips, on desktop/hoverable only (maybe need to refine by skin so that it matches the css?)
if (window.matchMedia('(hover: hover)').matches) {
	mw.loader.using('oojs-ui-widgets').then(() => { // make sure the PopupWidget library is loaded
		const supportsHover = window.matchMedia('(hover: hover)').matches;
		
		mw.hook('wikipage.content').add((contents)=>{ // hydrate any content inserted
			if (contents instanceof Element || contents instanceof NodeList) {contents = $(contents);}
			if (!contents || !(contents instanceof jQuery) || contents.length===0) {return;}
			contents
			.find('.custom-tt-wrapper.mw-collapsible')
			.each((_, wrapper) => {
				const
				$wrapper = $(wrapper),
				// isEE = $wrapper.hasClass('hnaw-extra-effect-wrapper'), // If we ever need something similar to GIW's Extra Effect template
				$toggle = $('<span>', {
					'class': 'custom-tt toggle-tooltip',//+(isEE ? ' hnaw-extra-effect' : ''),
					html: $wrapper.find('.mw-collapsible-toggle').html()
				}),
				$content = $wrapper.find('.mw-collapsible-content'),
				popup = new OO.ui.PopupWidget({
					$content: $('<div>', { html: $content.html() }),
					$container: $('.mw-parser-output'),
					anchor: true, // !isEE
				});
				
				// Remove default collapsible
				$wrapper.toggleClass(['mw-collapsible', 'mw-made-collapsible', 'mw-collapsed'], false);
				$wrapper.find('.mw-collapsible-toggle').replaceWith($toggle);
				$content.remove();
				
				// [[T:Tt]]'s toggle effect
				$wrapper.append(popup.$element);
				
				// T:Extra Effect's hover effect
				let time;
				$toggle.add(popup.$element).on('mouseover mouseout', (e) => {
					if (time) { clearTimeout(time); }
					time = setTimeout(()=>{
						popup.toggle(e.type==='mouseout' ? false : true);
					}, e.type==='mouseout' ? 250 : 0);
				});
			});
		});
	});
}