Tippy Tooltips [Official Support]

Anki Add-ons
2

[Add-on suggestion] It’d be useful if Anki had a formatting functionality to create tooltips

@gbrl.sc @01101 Here is a sample script that initiates tooltips created by the add-on:

function initTooltips() {
    globalThis.tippyAvailable = true
    createTooltips()
}

if (globalThis.tippyAvailable) setTimeout(() => {createTooltips()}, 0)

function createTooltips() {
    globalThis.tippyTypeset = false

    tippy("[data-tippy-content]", {
        placement: "bottom", // <- instead of top to prevent overflow
        allowHTML: true,
        theme: "sample",
        interactive: true,
        trigger: "mouseenter click",
        animation: "scale-extreme",
        appendTo: document.body,
        onMount(instance) {
            // MathJax support
            if (!globalThis.tippyTypeset) MathJax.typesetPromise().then(() => {
                globalThis.tippyTypeset = true
            })
        },
    })
}

initTooltips() should be called when Popper + Tippy have finished loading. For reference, see the sample note type.

Tooltip format

This is the format the add-on creates:

<a data-tippy-content="tooltip text">element</a>

I have dropped the initial data-attribute data-tooltip, because Tippy.js has a handy selection feature for elements with data-tippy-content. It should be very easy to replace existing tooltips using Anki’s Find & Replace function.

If you already have a lot of notes in a different format, I can help you convert them.