Anki Forums

Tippy Tooltips [Official Support]

This is the official support thread for my add-on Tippy Tooltips.


image

If you encounter any issues, please post them here, as I will not regularly check the AnkiWeb listing.


For information on how to use the HTML generated by this add-on, see this guide.

8 Likes

[Add-on suggestion] It’d be useful if Anki had a formatting functionality to create tooltips

@gbrl.sc @Casartelli Here is a sample script that initiates tooltips created by the add-on:

function initTooltips() {
    globalThis.tippyAvailable = true
    createTooltips()
}

if (globalThis.tippyAvailable) setTimeout(() => {createTooltips()}, 0)

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) {
            // MathJax support
            if (!globalThis.tippyTypeset) MathJax.typesetPromise().then(() => {
                globalThis.tippyTypeset = true
            })
        },
    })
}

initTooltips() should be called when Popper + Tippy have finished loading. For reference, see the sample note type.


Tooltip format

This is the format the add-on creates:

<a data-tippy-content="tooltip text">element</a>

I have dropped the initial data-attribute data-tooltip, because Tippy.js has a handy selection feature for elements with data-tippy-content. It should be very easy to replace existing tooltips using Anki’s Find & Replace function.

If you already have a lot of notes in a different format, I can help you convert them.

Can i use sample note type or do i have to edit something in that note type?

Of course :+1:

You should not have to make any further adjustments, as you already have the dependencies in collection.media.

Does it work for you?

Yeah, but…

jr4POjZ4TV

That’s a limitation of the editor browser. There is no way to jump out of an HTML tag at the end of a field’s contenteditable. Any text input will land inside the current HTML tag.

The same thing happens with <span> etc., in this case it is an <a>. When you’re used to this behaviour, you’ll adopt some prevention strategies like adding a space before using such formatting (you can see me do this in the showcase GIF of my add-on above).

The new HTML-Editor introduced by Anki 2.1.45 offers a neat way out of such a trap:

Kooha-2021-08-01-19_24_52

Press Ctrl+Shift+X to toggle the HTML view, then add a space and hit that shortcut again to get out.


I’ll see what I can do about this nuisance.

1 Like

Oh! Get it.

I have some questions:

How can i change the color of the marked text?

I tried modify this ‘’–tippy-bg:’’, but only changed the tooltip background color.

By the way Ctrl + T doesn’t seem to work for me, maybe a issue with my hotkeys?

Is it possible, at least in the future, to copy and paste a image in the tooltip?

The variable --tippy-bg in the sample note is for the tooltip background-color. The CSS selector for the links is [data-tippy-content], e.g.

[data-tippy-content] { color: red; }

image

If you want them to look like they do in the editor, use this styling:

[data-tippy-content] {
  border-bottom: 2px dotted;
  cursor: pointer;
}

That’s probably due to an add-on of yours that uses the same shortcut. I’ll add an option to change it soon.

image

Making this and other forms of formatting easier is definitely on my roadmap.

1 Like

The way i’m doing it is:

  1. Put an image in the field for it to go to media folder.
  2. Delete the image from the field.
  3. Put in the tooltip <img src=’ Name of the image.png>

Am i right or there is a better way for doing that?

Hi @kleinerpirat
I’ve just tested the addon and I liked it a lot. I think it’s a beautiful implementation of the original idea, and I can’t thank you enough for spending your time on building it.

Since the day I came up with this idea in my original post (and suggested modifying “Add Hyperlink” to create tooltips in other post), I’ve been trying to implement it as well (by trial and error, as I have never studied how to code), and I managed to do this in two different ways:

  1. I followed your suggestion on using the “Custom Styles” addon to wrap the text with html (which I used to create standard CSS tooltips)
  2. I figured out how to make the Add Hyperlink addon work the way I wanted (which I used to create Bootstrap tooltips).

I wanted to know the pros and cons of each one of these approaches before choosing one.

Now I notice that your addon has the pros of the second approach I mentioned above (e.g. good positioning, possibility to click the tooltip to toggle it) plus other interesting features (e.g. the box to edit the tooltip text and the “x” to erase its content), but I want to know if it is possible to format the text inside the tooltip as well (as my first approach does - se exemple below).

Like this (as well as change the text alignment):

I was only able to make it possible with standard CSS, as whenever I tried to do it in Bootstrap tooltips it got broken (see below).

Like this:

I’m afraid it has to do with some Popper.js’ limitation.

By the way, If it’s not possible to change the style of the text inside the tooltip, I’m planning to keep both your addon and the standard CSS tooltips, so I can choose which one to use depending on the situation.

For that part, you could use the inline HTML editor, if you didn’t already. Other than that, I’m afraid that’s the only way for now.


As stated on the AnkiWeb listing, HTML/Markdown support is on my roadmap. I want that feature too, so it’s just a question of time until it’s implemented.

What you can already do, is use the inline HTML editor (Ctrl+Shift+X) to get the markup and copy that inside the tooltips.

As long as there aren’t any quotes inside the tags (they will be escaped to ;&quot), it should work.


Perhaps it would have been sensible to wait with the publication of the add-on until formatting is implemented, but I didn’t want to hold it off any longer. I thought plain text might already be enough for a lot of use cases.

In the preview of the addon, the feature that caught my attention was the HTML editor in the field. Is that built into anki now or is it part of the addon? If it’s part of the addon, can you make a separate version with it being the default? I am tired of anki adding tags everywhere automatically honestly… Thank you!

It’s the new HTML editor introduced with Anki 2.1.45 :wink:


It’s not really Anki adding the tags and &nbsp;, but the webview’s browser. To prevent annoyances like that, Anki would need to have custom-fitted scripts that repair the text after the browser has done something unwanted. Keeping such scripts in line with the current state of the browser - which is third party software - is too much work I’m afraid. But perhaps someone is up for the challenge and creates an add-on for this some day.

The new HTML editor is a step in the right direction though, as it could potentially provide ways of cleaning up the mess.


An option of toggling all fields at once and an option to make Anki default to the HTML editor would be great @hengiesel.

1 Like

Hi @kleinerpirat
I got into the following issue with Tippy today:

tippy

The text inside this tooltip is particularly long (not too long) and the tooltip is going out of the page instead of repositioning. Are there anything that can be done to fix it?

I had the same problem a while ago and the solution he gave me was this:

tippy(tip, {
            content: strike.innerHTML,
            placement: "bottom",    // <- changed to bottom (from top)
            allowHTML: true,
            theme: "sample",
            interactive: true,
            trigger: "mouseenter click",
            animation: "scale-extreme",
            appendTo: document.body,
        })
1 Like

Where do I find it? Some JS file?

In the template(Back and Front)
anki_i3JaUYYQu4

1 Like

Found it.
It worked. Thank you!

One more thing. Do you guys know how to make nested tooltips?
image

The official website of Tippy gives an exemple but it doesn’t explain how to do it.

I saw that on the website and thought it was super cool, but don’t know how to implement it. :disappointed_relieved: