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?)
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);
			});
		});
	});
});