Installation

Step 1: Import the script

Step 2: Apply class="tooltip-content"

For the contents you want to display as the tooltip, put it inside <div class="tooltip-content"></div>.

• The contents can be on the page, or inside a template.

Step 3: Create the tooltip template

Create the page Template:Ajaxtt with the following code:

[[{{{1}}}|<span class="ajaxttlink">{{{2|{{{1|}}}}}}</span>]]

Usage

To make a link with tooltip, use {{Ajaxtt|page|title}} on any page, where:

• page is the link to the page.
• title is the displayed text of the link (optional).

Error message customization

When the page of the link does not have content for the tooltip, the tooltip will be displayed as "This target either has no tooltip or was not intended to have one". You can customize that message with this CSS:

.ajaxtt-error {
    background-color: var(--theme-accent-color);
    color: var(--theme-page-text-color);
    padding: 5px;
}

See also

• LinkPreview
• Tooltips - a more customizable way of using tooltips.