Tippy Tooltips [Official Support]

[01101]

Unexpected result while breaking line.

[kleinerpirat]

You should be able to make linebreaks inside the tooltip with Shift+Enter.

From your GIF, I can tell there’s an error that’s preventing the tooltip from closing, though. I’ll investigate this issue.

Thanks for the report!

[01101]

Could a way to scale images inside the tooltip be a thing in the future?

[kleinerpirat]

I wouldn’t implement that myself, because inline styling is bad practice and should be avoided at all costs.

You can set the size of images inside tooltips with the selector .tippy-content img.

Just set this once in your template’s Styling section and it will be applied to all of your cards. That’s arguably better than resizing each image individually.

But perhaps I’ll make the tooltip editor act like a field in the future. Then you’d have all of Anki’s editing features anyway - including the image resizing handle.

[BlueGreenMagick]

Tippy Tooltip’s js script injected via editor_will_load_note hook causes an error:

Uncaught TypeError: Cannot read property 'editingArea' of undefined
    at Object.initNote (tooltip_injector.js:18)
    at <anonymous>:1:263

Which results in js script added by other addons via editor_will_load_note hook after Tippy Tooltips, to not run. This bug is observed on Anki 2.1.45, and seems to be fine on 2.1.49.

Editing is not saved

[kleinerpirat]

Thanks for the report! (also thanks to @CUB_Luke for notifying me about this issue too).

I forgot to change a selector for the fields for 2.1.49 and below, which resulted in the error you mentioned. I just uploaded the fix.

@BlueGreenMagick Sorry for the hassle this has caused. I should have tested the legacy version more thoroughly.

[rewisch]

Hello

Unfortunately the link to the “Sample note type” doesn’t work anymore. Could you restore it?

I unfortunately do not manage to integrate the tooltips; mainly because I do not know how exactly to integrate the code in Anki. With the sample I would certainly manage it.

Thanks and best regards
Rewisch

[kleinerpirat]

https://ankiweb.net/shared/info/377971067

I once replaced the old sample and didn’t update the link in the AnkiWeb description. Once I publish the project on GitHub, this will get a bit easier

[rewisch]

Thank you very much!

[rewisch]

Is there a way to close the tooltip when a new card is displayed? If I continue clicking with the tooltip open, it still shows it on the new card, and if it has no tooltip, it cannot be closed. This happens at least on iOS.

[Well]

Can anyone help me with this problem? only appears on the ipad

[kleinerpirat]

Sorry for the long wait. I’m a bit busy this month, but will try to find the time in the next few days to take a look at this issue.

Same goes for @Well’s report, altough that might prove to be a bit trickier since I don’t have access to an iOS device atm.

---

A general word on the sample notetype

I originally didn’t intend to create a feature-rich notetype along with the add-on. It was really just about enabling easy input of the tooltip syntax in the editor. I wanted to leave the template implementation free to the user.

But now I think it would be better to provide a standard script that can be added to any template with the Asset Manager add-on.

It will take some time, though. Maybe in February.

[Well]

I understand, thanks for your attention. I’m anxiously awaiting the resolution of the problem because I don’t know how to handle any kind of language.

[huandney]

@kleinerpirat

var tips = [...document.querySelectorAll("[data-tippy-content]")];
var index = 0;

if (!globalThis.tippyShortcuts)
   document.addEventListener("keydown", (event) => {
      switch (event.code) {
         case "Tab": {
            event.preventDefault();
            tips[index]._tippy.hide();
            index = (event.shiftKey ? index - 1 : index + 1) % tips.length;
            if (index === -1) index += tips.length;
            tips[index]._tippy.show();
            break;
         }
         case "KeyQ": {
            event.preventDefault();
            tips[index]._tippy.hide();
            break;
         }
      }
   });
globalThis.tippyShortcuts = true;

Hi,
I’m not sure this is to be expected, but when we click Tab it always opens the middle word first:

With Shift+Tab everything is fine:

And congratulations on the work, I met this today, it is extremely useful.

[huandney]

This is better done within the tooltip script (You can change the trigger that closes tooltips. By default it’s set to close on clicks outside).

Can this change be made only for ankidroid? I think it’s interesting to leave this option in anki for desktop.

@kleinerpirat , thank you for your attention, I’m really entering this world of JavaScript, very exciting, but still my knowledge is very limited.

Edit:
I realized that the best option would be to modify the ClozeAdv code (https://ankiweb.net/shared/info/457099967), where we would disable the flipToBack function when inside cloze it contains <a> element.

Don’t worry I’m working on it.

[huandney]

Just to suggest an improvement, when we trigger the tippy it remains activated even when moving from one card to another:

Obs: I tested some versions of anki and this happened in all of them, on ankidroid it works fine.

[kleinerpirat]

@huandney

on ankidroid it works fine

That’s to be expected. Thanks for the suggestion! I will fix these things as soon as my exams are over (next week).

[Artset]

Hi, I really enjoy your addon.
Is it possible to do something for that it could be possible to see the tippies in the preview tab of the browse menu ? I can only see them if I stay in the simple browse menu. Thanks in advance for your help.

Add:
In fact, it doesn’t work for me. I tried to study and to see my tippies in review and it doesn’t work. I just see a kind of “hyperlink” but i cannot click or other. My anki version is 2.1.49.

[zyd199012]

Look this post

[Strutz]

Thank you so much for this super useful addon!

Unfortunately it’s not working for me on 2.1.50 and higher on macOS. Works fine on 2.1.49.

Edit: only the editor popup isn’t showing up. The HTML editor shows the generated blank tooltip, after inserting something the rest works fine.

Any suggestions?

Thanks in advance