kleinerpirat / anki-tooltips

Add tooltips to your Anki cards with Tippy.js

Anki Tooltips

Add tooltips to your Anki cards with Tippy.js

Get on AnkiWeb | Support

⚠️ For bug reports and feature requests, please use the Anki Forum thread.

---

A Reference for Add-on Developers

This repository was made public to serve as a reference for Anki add-on development. When I stumble upon a problem, I usually first try to think of some quality add-ons that solve similar issues and then read through their source code. Anki Tooltips aims to be that add-on for you.

I made sure to touch as many areas of interest as reasonably achievable without compromising the add-on's original purpose. The code is typed and documented at a novice level.

Anki Tooltips deals with:

• Anki's JavaScript API
• Custom and native Svelte components
• JS and CSS insertion into editor and reviewer
• Profile- and notetype-specific settings via GUI
• Programmatic card template edits
• HTML-filtering with BeautifulSoup 4

... and much more.

If you're planning a bigger project, it is worth taking a look at the structure of the repository and its build scripts, which are based on New Format Pack.

🛈 Major credit goes to Henrik Giesel (hgiesel), whose add-ons have been my gold standard for development questions ever since I got involved with this community. Henrik's generosity to provide insights into his work inspired me to publish this project - to honor his contributions to the Anki ecosystem and make them accessible to a wider audience.

Building

Navigate to tools/ and make the bash scripts executable.

For development builds use:

tools/dev.sh

Console logs are preserved in this mode and code is not minified. To see the effect of ts/ changes, just reopen the webview. Changes to python/ require a fresh build.

Symlink the output folder dist/ to Anki2/addons21/ to test the add-on in Anki.

---

Important Note

This is not a project template. It is not recommended to clone the repository and morph it to fit your needs. The project is quite complex and you would have to comply with multiple conditions of the GNU AGPL v3 license, such as disclosing your own source files and keeping copyright headers. If you want to start with ready-to-compile project template, head over to New Format Pack (licensed under MIT) and click "Use this template".

What is it, then?

This repository is a reference to look up answers to specific questions you might run into during add-on development, such as:

• "How can I use Svelte components for my Anki add-on?"
• "How to use the Editor API to avoid fiddling around with the DOM, which keeps changing with every new Anki version?"
• "How can I force Anki to sync a file from collection.media to AnkiWeb after I applied changes to it?"
• "What is the current best practice to insert CSS into editor fields?"

---

🛈 If you want to let me in on a more idiomatic way for something I declared "best practice", or wish to discuss some other development-focused topic, feel free to open an issue or PR here.

anki-tooltips's Issues

I cannot write this code in your tooltips

This is my content in card:

Then I hope add a tip to the word "love" with this code:

function prompt{  
    $ESC = [char]27
    "$ESC[46mPS $($executionContext.SessionState.Path.CurrentLocation)$('>' * ($nestedPromptLevel + 1)) $ESC[0m"  
}

I check the other card in Anki Browser and then came back to this card and it looked like this

But your old version didn't have those problems

---

I'm in Version ⁨2.1.60 (76d88073)⁩ to use your latest version of the add-on. Maybe related this post

MarkupResemblesLocatorWarning

/home/user/.local/share/Anki2/addons21/1840818335/qt/editor.py:44: MarkupResemblesLocatorWarning: The input looks more like a filename than markup. You may want to open this file and pass the filehandle into Beautiful Soup.
soup = BeautifulSoup(txt, "html.parser")

Those card with <> and " tend to have problems

The functionality of this plugin is very good. But your latest update broke almost all of my cards about html

default shortcut conflict with anki built-in ones

"Ctrl+T, ..." is used is used for insertig mathjax or latex blocks. Your shortcut Ctrl+T doesn't seem to block/override the built in ones. In the latest version (git commit d9f1e2264) and 2.1.55 the following happens:

Ctrl+T opens your tooltip window, but then I can't directly write words starting with T or M, typing the letter "t" is then transformed to "[latex][/latex]" and the cursor is in the middle of the latex block. I have to manually delete this. (Or did I really miss that you can now remap Anki default shortcuts?)

That's strange.

 

PS

• Thanks for publishing this add-on as a reference. I will carefully study it. This looks very useful for me, e.g. for my note linking add-on.

2.1.54 - editor broken?

I installed the latest add-on version from today (2023-02-16) in 2.1.54. Your add-on is the only active one.

At the moment the add-on seems to collapse all fields in my editor so that it's not useable.

I attached a screenshot showing two overlapping windows. The editor is on the top in the background, at the bottom is the window showing my add-ons installed:

Incompatibility with Cloze deletion add ons

Crash in browser due to missing callbacks in lifecycle.onMount

As reported on the forum (https://forums.ankiweb.net/t/tippy-tooltips-official-support/11844/133), the reloading of Svelte components such as the toolbar or fields causes a crash:

Uncaught (in promise) TypeError: cleanup is not a function
    at browser_editor.js:64505:13
    at run (browser_editor.js:61762:12)
    at Array.forEach (<anonymous>)
    at run_all (browser_editor.js:61768:9)
    at destroy_component (browser_editor.js:63416:7)
    at Object.d (browser_editor.js:109016:9)
    at Object.d (browser_editor.js:65379:24)
    at destroy_component (browser_editor.js:63417:34)
    at Object.d (browser_editor.js:109065:9)
    at Object.d (browser_editor.js:89279:32)

Relevant code:

            return () => {
                for (const cleanup of cleanups) {
                    cleanup();
                }
            };

https://github.com/ankitects/anki/blob/5e0a761b875fff4c9e4b202c08bd740c7bb37763/ts/sveltelib/lifecycle-hooks.ts#L43-L47

The way the API is written currently, one must provide a cleanup function, otherwise the App will crash. Also, it has to be synchronous (although most Svelte interactions require awaiting an element). I will try to improve this upstream, but for now need to fix this issue with somewhat verbose callbacks.

Can not enable Tooltips on front side

I can not enable it to show tooltips on the front. It will throw the Error below. Seems like it gets the wrong data type.

---

Error
An error occurred. Please start Anki while holding down the shift key, which will temporarily disable the add-ons you have installed.
If the issue only occurs when add-ons are enabled, please use the Tools > Add-ons menu item to disable some add-ons and restart Anki, repeating until you discover the add-on that is causing the problem.
When you've discovered the add-on that is causing the problem, please report the issue to the add-on author.
Debug info:
Anki 2.1.55 (01caec2a) Python 3.9.15 Qt 6.4.0 PyQt 6.4.0
Platform: Windows-10-10.0.22621
Flags: frz=True ao=True sv=3
Add-ons, last update check: 2023-02-16 11:40:47

Caught exception:
Traceback (most recent call last):
File "C:\Users\Chris\AppData\Roaming\Anki2\addons21\1840818335\gui\dialogs\model_settings.py", line 48, in accept
self.callback(
File "C:\Users\Chris\AppData\Roaming\Anki2\addons21\1840818335\qt\models.py", line 33, in set_settings
update_model(mw.col.models.get(mid))
File "C:\Users\Chris\AppData\Roaming\Anki2\addons21\1840818335\utils.py", line 78, in update_model
mw.col.models.update_dict(model)
File "anki.models", line 223, in update_dict
File "anki._backend_generated", line 883, in update_notetype_legacy
File "anki._backend", line 148, in _run_command
anki.errors.BackendError: JsonError { info: "invalid type: boolean false, expected a string at line 1 column 349" }