Tippy Tooltips [Official Support]

for audio , I copied this command to the tippy tool box. Its working,

<audio controls>
  <source src=" (add audio file here) " type="audio/ogg">

</audio>

thanks for your wonderful work
Problem : - you have to type this command every time you want to add an audio file

Is there a shortcut for viewing a tooltip when reviewing because I rarely use mouse when using anki?

This is something that has to be configured in your own template. Here’s a quick solution that uses Tab:

var tips = [...document.querySelectorAll("[data-tippy-content]")]
var prev = null

if (!globalThis.tippyShortcut) document.addEventListener("keydown", (event) => {
    if (event.key == "Tab") {
        if (tips.length == 0) {
            tips = [...document.querySelectorAll("[data-tippy-content]")]
        }
        if (tips.length > 0) {
            event.preventDefault()
            if (prev) prev._tippy.hide()
            let next = tips.shift()
            next._tippy.show()
            prev = next
        }
    }
})
globalThis.tippyShortcut = true

Put this script anywhere in your template. You might wanna change the key to something else (http://keycode.info/), since you’re probably relying on Tab for navigation within Anki.

1 Like

I’m not sure if this only happens to me but since I updated to 2.1.48 the tooltip (along with the Wikipedia pages) isn’t showing in the reviewer anymore even if I use the sample note type that you provided. Does anyone know why this is happening?

Note: In the browser, the tooltips are working fine

Sorry, I haven’t gotten around to fixing this issue until now.
Altough I don’t have the slightest clue what caused it, the problem seems to be fixed after moving the init script below the wiki script :man_shrugging: That script didn’t execute when it was placed above :sweat_smile:

Here’s the updated sample note type (couldn’t replace the existing listing because I forgot how the deck was originally called): Tippy Tooltips - Sample Note Type - AnkiWeb

I’m not sure if you remember but in the thread of the Add Hyperlink add-on you made a minor change in the link Cards Notes and Preview them in extra window that made it possible for the cid of the cards that this add-on generates to be shown by the tooltip in the reviewer. Although this workaround of yours made the tooltip show up plain text again in the review -but not in the preview, somehow- your add-on for me is still not functional since I was using it only as a sort of hyperlink for the other cards. Do you have any clue how to fix this?

I have recently updated the add-on for 2.1.50 compatibility.

It now fully supports HTML input, so you can just paste images, tables etc. into the tooltips. No template changes should be required to display the HTML, as I’ve already added an unescaping mechanism to the sample notetype back then.
There are also some UI improvements. Versions 2.1.44 to 2.1.49 have received this update too. Because this is a rather simple add-on, I think I will be able to support those lower versions for the time being.

Let me know if you run into any issues.

1 Like

Hi, How can I solve this problem on Ipad

In this case I’m using the standard card and both on the desktop and on the Iphone it works normally; only on the iPad that this message appears

Hi, is it possible to end the loop of shifting between tooltips when using the shortcut? Maybe another shortcut could do the trick. Many Thanks.

You could search for the function in your template that adds the shortcuts and replace it with this:

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;

This uses Q to hide the currently active tooltip and it also allows you to go back with Shift+Tab.


I’ll overhaul the sample scripts as soon as possible and make them available on GitHub.

2 Likes

hello! I’m using version 2.1.45 and do I have to paste the images in a certain way? When I drag and drop it into the field it pastes the picture just “behind”, I mean just like I would paste it in the editor.

Thanks for the report!

I haven’t implemented drag-and-drop yet. For now, you’ll have to copy the image and use Ctrl+V or right-click → “Paste”.

Unexpected result while breaking line.
0NcKtnCavr

1 Like

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!

1 Like

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

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.

1 Like

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.

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.

1 Like

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

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 :slight_smile: