User:Sigilbaram/tooltips

This piece of JQuery code allows the creation of tooltips that appear when hovering over certain elements.

Installation
Copy the bellow code and add it to your wiki's MediaWiki:Common.js, or create a Gadget for it.

/************* * Tooltips * *************/

/** * See https://help.gamepedia.com/User:Sigilbaram/tooltips for documentation. */

var tooltipPadding = 16; var tooltipBuffer = 10;

function jqEscapeId( id ) { return id.replace(/(:|\.|\[|\])/g, "\\$1" ); }

var initTooltipHover = function (el) { $(el).hover(function {       $(this).data('tooltip').show;    }, function {        $(this).data('tooltip').hide;    });

$(el).mousemove(function(e) {       var tooltip = $(this).data('tooltip');        placeTooltip(tooltip, e.pageX, e.pageY);    }); }

var placeTooltip = function (tooltip, mouseX, mouseY) { var pos = $('#bodyContent').position; var maxX = $('#bodyContent').width - tooltip.width - tooltipPadding; var x = Math.max(tooltipPadding, Math.min(mouseX + tooltipBuffer - pos.left, maxX));

tooltip.css('position', 'absolute'); tooltip.css('top', mouseY + tooltipBuffer - pos.top + 'px'); tooltip.css('left', x + 'px'); }

$('.tooltip-hover').each(function {   var tooltipId = $(this).attr('data-tooltip');

if (tooltipId) { var tooltip = $('[id="' + jqEscapeId(tooltipId) + '"]'); } else { var tooltip = $(this).find('.tooltip-content'); }

if(tooltip) { $(this).data('tooltip',tooltip); initTooltipHover(this); } });

$('.ajax-tooltip-hover').hover(function (e) {   if(!ajaxLoad) {        console.log('Tried to use ajax tooltips without ajaxLoad function. See: https://help.gamepedia.com/User:Sigilbaram/Ajax_load');       return;    }

/* Make sure these steps only happen once */ $(this).removeClass('ajax-tooltip-hover'); $(this).off('hover');

/* Get some variables for later */ var tooltipClass = $(this).attr('data-ajax-tooltip-class'); var source = $(this).attr('data-ajax-source'); var fragment = $(this).attr('data-ajax-fragment');

/* Create the tooltip and keep it hidden for now */ var tooltip = $(document.createElement('div')).css('position','absolute').hide;

/* Add the specified class(es), if any, to the tooltip */ if (tooltipClass) { tooltip.addClass(tooltipClass); }

/* Position the tooltip and display it */ placeTooltip(tooltip,e.pageX,e.pageY); $('#mw-content-text').append(tooltip); $(this).data('tooltip',tooltip); $(this).addClass('tooltip-hover'); initTooltipHover(this); $(tooltip).html(''); $(tooltip).show; ajaxLoad(tooltip,source,fragment); });

Constants
The value of these two variables in the javascript can be changed to suite the wiki.


 * tooltipPadding
 * The padding variable determines the space that is left between the right side of the tooltip and the right edge of the content area when the mouse is near the right edge of content area. This might need to be adjusted so that the tooltip doesn't appear to overlap the content area's padding depending on each wiki's skin.


 * tooltipBuffer
 * This is the distance the tooltip is offset down and right from the mouse.

By child element
This example shows having the tooltip be this child of the. When finding the tooltip in this way the JavaScript searches the  element for an element with the class. This method is used when the  attribute is not specified on the   element.

Red spanBlue div

Red spanBlue div

By id
This is similar to the previous example but instead of having the tooltip inside of the  element a   attribute is specified which matches the element ID of the tooltip. This could be used to re-use a given tooltip rather than than having multiple copies of the same tooltip on a page or when having the tooltip be a child element isn't feasible. Note that the  class is not required on the tooltip when finding it by ID instead of as a child of the   element. Also note that MediaWiki encodes certain characters in element IDs into escape sequences, so you may need to use the magic word anchorencode in the  attribute in order to have the two to match correctly.

Red span by id 1

Some other content

Red span by id 2

Some more coontent

Blue div by id

Red span by id 1

Some other content

Red span by id 2

Some more coontent

Blue div by id

Ajax tooltip

 * Requires the Ajax load script.

Ajax tooltips load their content from somewhere on the wiki. Although in this example the tooltip's content happens to be loaded from this page, the main use for this syntax would be for loading a tooltip from another page. To make an ajax tooltip use the class  and specify the page the tooltip is loaded from with the   attribute. The  attribute takes a CSS selector and is used to select an element from the source page, without this the whole page would be used as the tooltip's content. Any IDs in the  attribute may need to be escaped using   as in the by id example above.

This box was loaded with ajax.

Ajax example

This box was loaded with ajax.

Ajax example

Wiki table example
This example shows using  on table cells as well as mixing and matching finding tooltips by child and by id.

 

 <div id="tool-blue-€" style="width: 500px; height: 100px; background: blue; display: none;">

Tips

 * Don't use CSS to style the  or   classes in case a situation arises where certain tooltips are wanted that doesn't have the same style. Instead, make separate CSS classes for styling tooltips, so that functionality and behavior is kept separate from appearance.