Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

💬Anki Tooltip

💬Anki Tooltip - Quick add Tooltip in the Editor (Fixed by Shigeඞ)

AnkiWeb Page | Code : 1217436829

banner_shigeyuki_2

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.

AnkiTooltip

How to use

alt text

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

alt text

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

alt text

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

alt text

<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

alt text

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ඞ! I'm looking for supporters for my add-ons development, because I like Anki! So far I fixed and customized 60+ discontinued add-ons and created 30+ new add-ons. If you support my volunteer development you will get 14 add-ons for patrons only and 15 game themes included in AnkiArcade ($5/month). If you have any ideas or requests feel free to send them to me, thanks! :D

patrons_banner
Get Patrons only addons | Patrons Q and A | Contact

[ Special Thanks ]
So far I received donations from 439 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 Kyle Mondlak NamelessGO ElAnki Ernest Chan Abhi S GP O'Byrne KM Jonathan Contreras Isabel Guan Jesse Asiedu ellie Matthew Hartford Tobias Klös K Peasant of Anki iuventius findus161 Patrick ellis tarek Jake Stucki Muneeb Khan Juan Salgado qiting zeng Keeler Kime Kurt Grabow Elisabeth Barber Lis Y. Matheus Chagas Fahim Shaik Augusto Stein Ashok Rajpurohit mootcourt Yaeerrrrrr Svel1989 Christopher Lam NoirHassassin Kolorophyll Morgan Torres Kaitlyn Bowler Tae Lee Steven Banner Heidi Leonora Lomoki Akporyoe Gabriel Farrugia David C Gabriel Vinicio Guedes sab hoque Ythalo Vlogs Ujwal Chadha pie_is_good Ketan Pal Aurora Dzurko Tyler Schulte Mac gus forester Douglas Beeman Bryn Price Xiuxuan Wang Temi Jide Ansel Ng Haley Schwarz Woody Iggi Jeanna J P K Carly Burdorf Cole Krueger Wei Sean Voiers Austin Regal Robert Malone Jk Andrew Yang CunningPotato Mia Aayush Bhatawadekar Stellate ggl Cubli Tina Weingarten Aydin Herik Azfar Hussain Victor Evangelista Adrine Oleksandr Pashchenko Orlando Frey kenken Take Root Osasere Osula Kylie Alex D Aaron Buckley oiuhroiehg Sebastian Bellotti ...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! :-)
Please rate this