Anki Forums

Tippy Tooltips [Official Support]

Thank you very much for the tips!!!

1 Like

@kleinerpirat , Is the tippy tooltip compatible with the closet card type?

Sure. The sample note type doesn’t have a Closet setup, but you could simply copy its scripts to your desired Closet note type (best done with Asset Manager) and it should work.

I know how to insert script using ASSET amanger. But I have 3 closet setup in my note types ( result of my own experiments :upside_down_face:) . Any idea to which one I need to do the insertion ?

I tried to copy the code from the tippy tool note types to the bottom closet setup. Then the auto scroll code stopped working …[ then I had to copy-paste the previous closet code in all the three closet setup - finally back to square one.]
Soo pls tell me which code needs to be copiedto which closet setup…
Thanks for your great effort… Your massive cards are superb… I am experimenting on that, I will put my suggestions in the other page… Thanks

Whenever you duplicate a note type containing Closet, the setup will be duplicated as well. To reduce it back to one, try the steps described in the following comment:


But, you shouldn’t put it into the Closet setup anyway (Auto scroll was an exception, because it needs to execute after Closet and that seems to work reliably with the closetPromise, even though it theoretically shouldn’t).

Create a new JavaScript snippet, call it Tippy Tooltips and paste the code in there.

This might be interesting to @Casartelli, @Radorion and anyone else who is following the topic Anki as a knowledge base (with a "massive cloze note").

New Feature: Wikipedia Tooltips

I want to inform you about a cool little script I added to the Tippy Tooltips Sample Template. It’s meant to be a showcase for the power of Tippy’s HTML tooltips. When you hover a link that leads to a Wiki page, a preview - quite similar to the ones on the real Wikipedia page - is fetched using the MediaWiki API and displayed as a clickable tooltip.

As a bonus, I added an iframe that opens the Wiki-links inside the card instead of an external browser. That way, you can go down Wikipedia rabbit holes from the comfort of your own reviewer.


Showcase

Step 1: Add Wikipedia content:

Kooha-2021-08-12-18_13_39
e

Step 2: Enjoy!

Important Note:

Template scripts like this one will always be the lowest priority in terms of support. That’s because I consider any type of template JS an advanced feature. If you like dynamic stuff like this, I highly recommend to start learning JavaScript if you aren’t already doing it.

Notes for the tech-savy

The necessary API calls are made only after the user has hovered a link - and only for that specific link. This should significantly reduce the amount of API calls per card, so you shouldn’t have to worry about temporarily getting blocked by Wikipedia for overusing their service.

4 Likes

Thank you for this!
I can’t seem to get it working on the Anki desktop version. I tried disabling every addon & checked to see if the files are located at collection.media. Also tried using the load hierarchy script you’ve written with no success. On Anki web I could get it working with no issues. Is there anything I’m doing wrong? :open_mouth:
Great work nonetheless!

This is definitely an error on my side. I tend to forget Optional chaining (?.) - JavaScript | MDN is only working on Linux, AnkiDroid and AnkiWeb, but not on Mac or Windows.

I pushed a fix to the template. Would you be so kind to tell me if this update fixes your issue?

2 Likes

It works! Thank you so much for the fast response.
But for some reason when I make my own card, use CTRL+T and create a tooltip, it only shows in the editor. Upon reviewing I am not able to view it (specifically on tooltips I create).
Upon viewing the example deck I am unable to find any differences? It works both on the editor & upon review. What am I doing wrong v2? :stuck_out_tongue:

The add-on is only for editing, but for reviewing you need to initialize the tooltips in your template. For that, you need to add the import/initialization functions to your note type.

You could just copy the scripts “Tippy Init”, “Tippy Wikipedia” and “Script Loader” from my sample note type to your card template.

I recommend the add-on Asset Manager, but you can also use the native Card template editor.

1 Like

I imported all 3 scripts and it worked but looked plain, so just don’t forget to add the styles CSS from the example deck to yours, and you’re set!
(writing this for others to see)

1 Like

Amazing, I will try it as soon as possible.

Thanks for remember me

Where should i copy paste this code?

Aim : To change the colour and font size of the tippy

Why?: integrated Tippytool with closet( works fine). Closet background is black ,so visibility issue is there and tippy fonts are too small.

Thanks for your great work

What you posted is the styling of the links, which show the tooltips when hovered.
This is the styling for the sample note type theme:

/* Custom Tippy theme */

.tippy-box[data-theme~=sample] {
  background-color: var(--tippy-bg);
  box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.3);
  padding: 10px;
  border-radius: 5px;
  font-size: 16px; /* Increase this value for bigger text */
  color: var(--font-color);
}
[data-theme~=sample] .tippy-arrow {
  color: var(--tippy-bg);
}

As you can see, it uses two variables --tippy-bg (=tippy-background) and --font-color. These are defined at the top of the styling section (in .card) for easier access. You can either change those definitions or replace the var(--...) values in the theme definition with your desired actual values. CSS basics - Learn web development | MDN

2 Likes

Thanks… I will try this

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?