This is the official support thread for my add-on Tippy Tooltips.
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.
[Add-on suggestion] Itâd be useful if Anki had a formatting functionality to create tooltips
@gbrl.sc @01101 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.
Of course 
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âŚ
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:
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; }
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.
Making this and other forms of formatting easier is definitely on my roadmap.
1 Like
The way iâm doing it is:
- Put an image in the field for it to go to media folder.
- Delete the image from the field.
- 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:
- I followed your suggestion on using the âCustom Stylesâ addon to wrap the text with html (which I used to create standard CSS tooltips)
- 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 ;"), 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 
Itâs not really Anki adding the tags and , 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.
2 Likes
Hi @kleinerpirat
I got into the following issue with Tippy today:
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)
1 Like
Found it.
It worked. Thank you!
One more thing. Do you guys know how to make nested tooltips?
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. 