Tippy Tooltips [Official Support]

[kleinerpirat]

@gbrl.sc

Do you guys know how to make nested tooltips?

It should be as easy as writing a tooltip into another tooltip’s data-tippy-content attribute and using single instead of double quotes.

The reason why this won’t work with the current template script, is that it uses a CSS selector to find the tooltips - and things inside of attributes are not represented in the DOM as they’re just strings.

Once the tooltips are instantiated, an element’s Tippy instance can be accessed with element._tippy
The actual DOM representation of the displayed tooltip is stored inside the tippy’s popper attribute:

element._tippy.popper

Say we have a nested tooltip like this one:

This <a aria-expanded="false" data-tippy-content="Let's just manually add <a data-tippy-content='I am nested!'>another one</a>.">tooltip</a> is nested.

The following script will instantiate the first nested tooltip:

setTimeout(() => {
   let nested = document.querySelector("[data-tippy-content]")
   let tip = nested._tippy.popper.querySelector("[data-tippy-content]")

    tippy(tip, {
        content: tip.dataset.dataTippyContent,
        placement: "bottom",
        allowHTML: true,
        theme: "sample",
        interactive: true,
        trigger: "mouseenter click",
        animation: "scale-extreme",
        appendTo: document.body,
    })
}, 0)

---

I can try to make the creation of arbitrarily deeply nested tooltips possible and provide you with a more complex template script that will recursively instantiate nested tooltips with a future update. It’s not high on priority list though, because I don’t see many people benefitting from it.

[Darkstalker]

Thank you for the addon.

Is it possible to make the tooltip render MathJax?

[kleinerpirat]

Replace createTooltips() in your note template with the following code:

function createTooltips() {
    globalThis.tippyTypeset = false

    tippy("[data-tippy-content]", {
        placement: "bottom", // <- instead of top to prevent overflow
        allowHTML: true,
        theme: "sample",
        interactive: true,
        trigger: "mouseenter click",
        animation: "scale-extreme",
        appendTo: document.body,
        onMount(instance) {
            if (!globalThis.tippyTypeset) MathJax.typesetPromise().then(() => {
                globalThis.tippyTypeset = true
            })
        },
    })
}

[Well]

Beautiful complement!! really very useful I would like to ask a question: how can I change the tooltip link color? and how can I insert words with different colors inside the tooltip? Thanks!!

[kleinerpirat]

@Well

how can I change the tooltip link color?

This is the selector for the tooltip links in the template:

a[data-tippy-content] {
  border-bottom: 2px dotted;
  cursor: pointer;
  color: /* your color, e.g. green, #04aa6d, ... */
}

If you want to edit the appearance in the editor, you’ll need to head into the add-on folder to ../web/field.css and change var(--link) to your desired color.

@Well

how can I insert words with different colors inside the tooltip?

This is currently not possible without manually writing out the HTML. I will add basic editing support in the next update.

[Well]

Thank you very much for the tips!!!

[marcus_aurelius]

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

[kleinerpirat]

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.

[marcus_aurelius]

I know how to insert script using ASSET amanger. But I have 3 closet setup in my note types ( result of my own experiments ) . 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

[kleinerpirat]

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:

Closet For Anki [Official support]

I noticed another bug I think, but this is related to Asset Manager. Whenever I clone a note type which already has a custom closet setup, when Anki restarts, Closet adds another closet setup. So essentially I get stuck with two Closet Setup scripts which are both protected by the addon. To fix this, I have to Disable closet addon Remove both setups from the duplicated note type Re-enable closet addon Place the previous custom setup. This gets a bit tedious when I try to make a new card type …

---

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.

[kleinerpirat]

This might be interesting to @01101, @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:

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.

[bluehammer]

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?
Great work nonetheless!

[kleinerpirat]

@bluehammer

Is there anything I’m doing wrong?

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?

[bluehammer]

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?

[kleinerpirat]

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.

[bluehammer]

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)

[Radorion]

Amazing, I will try it as soon as possible.

Thanks for remember me

[marcus_aurelius]

@kleinerpirat

a[data-tippy-content] {
  border-bottom: 2px dotted;
  cursor: pointer;
  color: /* your color, e.g. green, #04aa6d, ... */
}

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

[kleinerpirat]

Themes

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

[marcus_aurelius]

Thanks… I will try this