Tippy Tooltips [Official Support]

Anki Add-ons
97

Hey @kleinerpirat,

Thank you very much for your cool addon! Unfortunately, I’ve recently encountered two issues:

Firstly, your Tippy Tooltip addon doesn’t seem to work properly when using a card template with more than three fields. When I try to add a tooltip to text in the fourth (or fifth, sixth, etc.) field of a card, the dialogue for editing the tooltip isn’t shown (however, the HTML code is still added). Interestingly enough, this only happens when editing a card in the card browser, and not in the ‘add a new card’ window.

Secondly, including the Popper & Tippy Javascript files (or any Javascript files for that matter) doesn’t seem to work on AnkiWeb on iOS (version 16.0). Neither your Sample Note Type nor my own note type based on your Guide works when opening AnkiWeb in an iOS browser (on Windows, everything works fine, both in the Anki app and in a browser). In the Javascript console the following error is logged: TypeError: Importing a module script failed, but I haven’t had much luck figuring out what exactly is going wrong.

Edit: Upon further investigation, the second issue also happens on Safari on a MacBook, so the culprit seems to be Apple’s WebKit. This time the console log is a bit more informative, also showing Failed to load resource: the server responded with a status of 404 () – https://ankiuser.net/study/_popper.min.js. So all of this is caused by the dynamic import statement looking in the wrong directory (https://ankiuser.net/study/ and not https://ankiuser.net/study/media/), which is likely the result of not respecting the <base href> tag (see here for the corresponding bug report on WebKit’s bug tracker). However, this can easily be fixed by adapting the import script as follows:

function getAnkiPrefix() {
    return globalThis.ankiPlatform === "desktop" ?
        "/" :
        globalThis.AnkiDroidJS ?
        "https://appassets.androidplatform.net/" :
        typeof window.webkitConvertPointFromNodeToPage === 'function' ? // i.e. a WebKit browser
        document.baseURI : // see https://bugs.webkit.org/show_bug.cgi?id=201692
        "./"
}

/* ... */

async function loadScript(script) {
    var scriptPromise = import (`${getAnkiPrefix()}${script.url}`)

    /* ... */

}
1 Like