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('<img src="https://help.gamepedia.com/extensions/WikiEditor/modules/images/dialogs/loading.gif" />');
    $(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.

Examples

By child element

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

<span class="tooltip-hover" style="background: red; color: white; with: auto;">Red span<div class="tooltip-content" style="width: 500px; height: 100px; background: blue; color: white; display: none;">Blue div</div></span>

Red span

Blue div

By id

This is similar to the previous example but instead of having the tooltip inside of the .tooltip-hover element a data-tooltip 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 tooltip-content class is not required on the tooltip when finding it by ID instead of as a child of the .tooltip-hover 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 data-tooltip attribute in order to have the two to match correctly.

<span class="tooltip-hover" data-tooltip="{{anchorencode:test tooltip!}}" style="background: red; color: white;">Red span by id 1</span>

Some other content

<span class="tooltip-hover" data-tooltip="{{anchorencode:test tooltip!}}" style="background: red; color: white;">Red span by id 2</span>

Some more coontent

<div id="test tooltip!" style="width: 500px; height: 100px; background: blue; color: white; display: none;">Blue div by id</div>

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 ajax-tooltip-hover and specify the page the tooltip is loaded from with the data-ajax-source attribute. The data-ajax-fragment 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 data-ajax-fragment attribute may need to be escaped using anchorencode as in the by id example above.

<div style="display: none">
<div id="ajax-example" style="border: solid 1px red; width: 400px; height: 100px; padding: 1em; background: white;">This box was loaded with ajax.</div>
</div>

<span class="ajax-tooltip-hover" data-ajax-source="User:Sigilbaram/tooltips" data-ajax-fragment="#ajax-example" style="background: red; color: white;">Ajax example</span>

This box was loaded with ajax.

Ajax example

Wiki table example

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

{| class="wikitable"
! Heading 1
! Heading 2
! Heading 3
|-
| class="tooltip-hover" data-tooltip="{{anchorencode:red-tooltip.42[}}" style="color: red;" | Red
| class="tooltip-hover" style="color: green;" | Green<div class="tooltip-content" style="width: 500px; height: 100px; background: green; display: none;"></div>
| class="tooltip-hover" data-tooltip="{{anchorencode:tool-blue-€}}" style="color: blue;" | Blue
|}
<div id="red-tooltip.42[" style="width: 500px; height: 100px; background: red; display: none;"></div>
<div id="tool-blue-€" style="width: 500px; height: 100px; background: blue; display: none;"></div>

Heading 1	Heading 2	Heading 3
Red	Green	Blue

Tips

• Don't use CSS to style the tooltip-hover or tooltip-content 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.