Tippy Tooltips [Official Support]

hi,

I was using images in the tippy tools. it works fine, The images are getting compressed a bit. Is it possible to make the images either of the original quality or even enlarge it with in the tippy tools ?

PS: thanks @kleinerpirat for such a powerful addon. The mazive close card and tippy tool is revolutionising the anki… A big salute to your efforts.

By that you probably mean the images get displayed smaller than they really are, because they are constrained by the max. tooltip size.

It’s possible to change the tooltip size with CSS, but I think tooltips are not the best place to put images, anyway. This addon is meant to hide short pieces of tangential information and make them available as tooltips when needed.

For cards with multiple images, I’d recommend using a horizontal gallery.

I appreciate the kind words @marcus_aurelius, but these things are just little side projects I did because I had too much free time on summer break and I wanted to help some people on the forum - nothing deserving of the word “revolutionary”. ^^

Is an audio file supported in the tippy tool?

No, but that’s a fun idea I’ll keep in mind when I get to work on this add-on again.

Did it work in ankidroid?
I try it but seems not, so is it an error in my side or is it not support AnkiDroid yet?

It is supported, but the activation of the tooltips depends on your template code. Did you try it with the sample note type?

Yes, this is what it shows, I use 2.15.6 version


Thanks, I just checked and I’m experiencing the same issue :+1: I’l look into it and update the sample note type.

1 Like

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”.