Quick add Tooltip in the Editor (use tippy.js).

This add-on is a Fixed and Enhanced version for Anki25+ of the addon "Anki Tooltips", originally created by Matthias Metelka (kleinerpirat) and credit goes to them.

How to use

Tooltip-Editor in Editor

Editor button

• Select text in the editor and press this button to add a tooltip. The added tooltip will be displayed in the editor and reviewer. The default shortcut key is “Ctrl+t”

Tooltip Editor

• Click on the text with the added tooltip to open the tooltip editor. This function only works in the Editor. You can move the position by dragging this window. Click outside this window to cancel editing.

Check button (bottom right, green)

• Updates the tooltip text with the entered text. Pressing the button when the text is empty will delete the tooltip. The shortcut key is “Alt+Enter.”

X button (top right, red)

• Deletes the tooltip and leaves only the text.

Restore button (top left, purple)

• Restores the text being edited to its previous state.

NoteType manager

This add-on auto adds CSS and JavaScript to note types to display tooltips on cards. This option allows you to manually disable, enable, or customize them all at once.

Enable Tooltip Notetype (Back)

• Enabling this will enable tooltips, disabling it will remove the CSS and JavaScript added to the note type.

Front Tooltip

• Tooltips are displayed by default only on the answers of cards (Back). If you want to display tooltips on the questions of cards, you need to enable this (Front).

Prev-Shortcut, Next-Shortcut

• If there are multiple tooltips, you can display them using shortcut keys. You can change the shortcut keys by double-clicking this option.

Context Menu

• These options can be changed in bulk. Select multiple -> Right-click -> Context Menu

Option

Editor Shortcut key

• You can change the shortcut key for adding tooltips in the editor, the default is “Ctrl+t”.

Auto add tooltip to NoteType

• When you add a tooltip in the editor, CSS and JavaScript for displaying the tooltip in the note type will be auto added. This option is enabled by default.

Use JavaScript in Editor

• This add-on executes JavaScript in the editor to display and edit tooltips. Disabling this option will disable almost all of that JavaScript and switch to a simple mode for adding tooltips only. (e.g. you don't use the tooltip editor at all because you edit HTML directly.)

Notes

• This add-on edits note types. If you are concerned I recommend backup all your decks before using this and check that it works properly.

• Text with added tooltips will have HTML such as colors and bold text removed.

• If you are using advanced shared decks, unexpected problems may occur due to interference, if so please send me your card template so I can look into it.

Technical explanation

Tooltip HTML

<a data-tippy-content="Fixed by Shigeඞ">Anki Tooltip</a>

• Adding a tooltip generates code like this. Advanced users can add or edit tooltips by directly editing this HTML. Nesting is not currently supported.

Front Template, or Back Template

This is the code for the tooltips auto added to the notetype (card template).

<script src="_anki-tooltips.js" data-prev-shortcut="Shift+Tab" data-next-shortcut="Tab"></script>

Styling

@import url("_anki-tooltips.css");

In short, the notetype options and auto-add feature are enabled or disabled by adding or removing these lines of code. Addon options are read from these note templates and displayed, so advanced users can manually add or remove these codes directly.

JavaScript and CSS

• _anki-tooltips.js and _anki-tooltips.css are automatically generated and saved to the user's media folder. They should also work on mobile devices.

Development

About Svelte

• The original add-on was developed using Svelte. Svelte is a convenient framework that is often used in the official Anki, but in the latest version of Anki access to Svelte from add-ons is completely broken and probably irreparable (Svelte 5), so this add-on abandons Svelte and almost all of the code has been replaced with plain JavaScript. I made it as similar as possible but it works a bit differently from the original add-on.

Compatibility

• The tooltips use the same system as the original add-on, so if you have cards created with the original AnkiTooltip they should work normally with this add-on as well.

🚨Report

If you have any problems or requests feel free to send them to me.

1. 👍️Rate Comment : You can contact me anonymously, and AnkiWeb will send you an email when I reply, a high rating increases priority of development.
2. 👩‍🚀Reddit : You can request me to repair broken Add-ons.
3. 🌟AnkiForums : You can request me to repair broken Add-ons, and it is ideal for open discussions.
4. 🐙Github : Makes it easier to track problems.
5. 💖Patreon DM : Response will be prioritized.

💖Please Support Shige's Anki add-ons development!

Hi thank you for using this add-on I'm Shigeඞ!

1. [ 🛠️Fix add-ons ] So far I fixed and customized 80+ broken add-ons for free and developed over 30 add-ons as a hobby (all add-ons). If you have requests to fix broken add-ons feel free to contact me. Fix broken addons (Free)
2. [ 💖Donation ] I'm looking for supporters for my add-ons development because I like Anki!👍️ If you support my volunteer development you will get 14 add-ons for patrons only and 15 game themes included in AnkiArcade ($5/month).

Get Patrons only addons | Patrons Q and A | Contact

[ Special Thanks ]
So far I received donations from 561 patrons and without their support I never could develop this, thank you very much!🙏

Patrons: Arthur Bookstein Haruka Luis Alberto, Letona Quispe 07951350313540 Lily Daniel Kohl-Fink Tim NamelessGO Kyle Mondlak ElAnki Abhi S Matthew Hartford Jonathan Contreras findus161 K Peasant of Anki Juan Salgado Ernest Chan Yaeerrrrrr Elisabeth Barber Jesse Asiedu GP O'Byrne David C KM Christopher Lam Kolorophyll Jake Stucki Kaitlyn Bowler Isabel Guan Steven Banner Heidi Leonora Lomoki Akporyoe ellie Tobias Klös Xiuxuan Wang Ujwal Chadha gus forester iuventius Patrick ellis tarek Iggi qiting zeng Carly Burdorf Austin Regal Muneeb Khan Aydin Herik Mia Hoang Hung Sameer Al Matheus Chagas Bryn Price Orlando Frey pie_is_good Svel1989 Take Root Vivian Cao Keeler Kime Kurt Grabow Zarina Balde Pansanity Gabriel Farrugia Lis Y. Fahim Shaik Augusto Stein Ashok Rajpurohit mootcourt NoirHassassin alpha male, shredded af Morgan Torres Dennis Obis Anh-Tai Nguyen Tae Lee Joseph Howell Gabriel Vinicio Guedes sab hoque Terence Bartenbach R Rebecca only Ythalo Vlogs Ketan Pal Aurora Dzurko Tyler Schulte Kmyungc Mac Will S. Meeyah Davis Eric Allen Devon Williams alex han Douglas Beeman Andrew Yick Robert Remedios Marley Easterbrook Temi Jide Ansel Ng Simeon Azfar Hussain Haley Schwarz Woody kenken Jeanna ...full list

📥 How do I install this add-on?

1. This add-on works with Anki for desktop (it does not work on mobile). Download Anki from the official website if you haven't already.
2. Copy and paste the add-on code ( 1217436829 ) into Anki and you can install it. ( Menu -> Tools -> Add-ons -> Get Add-ons -> Code [ add-on code ] )
3. When I develop bug fixes, create new features, or compatibility for New Anki, I will notify you and you can install it.
4. Add-ons will be broken when the official Anki gets a major update, so if you like this add-on please support my volunteer development by rating, sharing, and donating. Thank you!

Click here and please Rate this add-on, Thank you! :-)