Since I cannot reproduce the issue, I’ll need you to download AnkiWebView Inspector - AnkiWeb, then right-click somewhere on the editor and choose “Inspect” to open the dev-tools. Navigate to the “Console” tab and check if there’s any error popping up when you perform a tooltip insertion.
I’ve been planning to refactor the add-on anyway (I’ve noticed a few hickups myself), so there’s a good chance your issue would get resolved as a side-effect.
Thanks! Done, this is error pops up:
editor.js:7 Uncaught TypeError: Cannot read property 'querySelector' of undefined
at w (editor.js:7)
at Array.M (editor.js:7)
at HTMLButtonElement.o (editor.js:7)
at note_creator.js:33
at Array.forEach (<anonymous>)
at HTMLButtonElement.$t (note_creator.js:33)
at HTMLButtonElement.v (note_creator.js:34)
Hello, first, thank you for the useful add-on.
Anki 2.1.54 (rc1), Windows 10:
Most of the times, when I try to add a tooltip, the tooltip menu appears in the wrong position, i.e. always at the top-left of the screen (no matter which field I’m currently modifying)
This tooltip menu is also buggy.
I can then open and edit this empty tooltip and it will work as expected.
This behaviour appears to happen both in the Add window, in the Editor and in the Browser.
EDIT: if I open the editor of a note that already contains a ‘tippy tooltip’ and click on the “tooltipped” words, the tooltip editor does not open. It becomes responsive to clicks only after I add a new tooltip (following the steps listed above)
Also:
are often added before and after the tooltip (not sure if this is due to the add-on)It works well before version 2.1.49 all the time. But when we arrive at 2.1.54. Such this is my content in my tippy:
A=ReflectionMatrix[Cross[{2,1}]];
ResourceFunction["PlotVector"][{{3,1},A.{3,1}},PlotLabel->"m=(3,1)关于y=\!\(\*FractionBox[\(1\), \(2\)]\)x的反射变换"]
It will be this:
If you copy from the editing area. It will be:
A=ReflectionMatrix[Cross[{2,1}]];
ResourceFunction["PlotVector"][{{3,1},A.{3,1}},PlotLabel->"m=(3,1)关于y=\! Mathjax , Mathjax ]\)x的反射变换"]
Help…
When using Tippy Tooltips with a Redesign addon like Anki Redesign or Redesign
I get an error when starting Anki.
Using MathJax inside seems to be working,
when the MathJax-tooltip is the first to be opened.
When having multiple tooltips on a card,
the MathJax isn’t converted when another tooltip was opened before.
<!-- MathJax -->
<script type="text/x-mathjax-config">
MathJax.Hub.processSectionDelay = 0;
MathJax.Hub.Config({
messageStyle: 'none',
showProcessingMessages: false,
tex2jax: {
inlineMath: [['\\(', '\\)']],
displayMath: [['\\[', '\\]']],
processEscapes: true
}
});
</script>
<script type="text/javascript">
(function() {
if (window.MathJax != null) {
var card = document.querySelector('.card');
MathJax.Hub.Queue(['Typeset', MathJax.Hub, card]);
return;
}
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML';
document.body.appendChild(script);
})();
</script>
does tippy tooltips work with mobile like iphone and ipad?
Tooltips you create on desktop will be displayed, but editing them is not supported on mobile.
Ah I see thanks!
So I made it all work, but how can I address the images within the field??
I tried [data-tippy-content] img {
}
but I won’t really work.
I have some kind of hovering effect when I hover over images, but on the tool tipp I’d like to disable it. I tried with the HTML inspector, but since it is a hovering effect, I can really target it, because the animation is so fast.
And how can I make the tippy field bigger, when the images are bigger?
You can force elements into specific states with the inspector:
what am I doing wrong?
Ah yes, the tooltips are mounted/unmounted via JS, so we cannot invoke them via CSS classes alone. But clicking a tooltip when it’s open should (or opening it with a click in the first place) should make it stay there until you click outside again.
At least that’s how it works on my notetype… you can try it.
Also, try this selector for images:
.tippy-content img
ah nice yes it stays when I click, thanks! Didn’t notice that feature.
so I was able to change the width of the tippy box too. but just for the future: initially the first thing that popped up was something called “element.style”. most of the time there is some sort of reference .css document attached, but “element.style” seems to not have this. So everything works fine when I address the tippy-box, but how can I modify “element.style” in the future when I don’t have the comfortable position that there is another css value which actually have a css reference that I can look up and change?
element.style is a utility of the inspector to add inline styles to the currently selected element (and only that specific one).
The entries below are the ones that come from your stylesheets. If you click the + icon to the right of .cls, the inspector will add a new style with a selector you could actually use.
(simplest is to just look at the HTML to the left to find the classes and attributes of elements)
thanks! exceptional add on btw
I found out, that pictures used in tippy boxes are not recognized as actually “used” pictures. Anki showed me a lot of images that weren’t “used”. Since I often make testcards for feature testing I thought that this was correct. I deleted and realized, that all the tippy images where gone too.
so how do I solve this? Do every picture now has to have an “_” before the actual name?
Thanks!
Hey @kleinerpirat,
Thank you very much for your cool addon! Unfortunately, I’ve recently encountered two issues:
Firstly, your Tippy Tooltip addon doesn’t seem to work properly when using a card template with more than three fields. When I try to add a tooltip to text in the fourth (or fifth, sixth, etc.) field of a card, the dialogue for editing the tooltip isn’t shown (however, the HTML code is still added). Interestingly enough, this only happens when editing a card in the card browser, and not in the ‘add a new card’ window.
Secondly, including the Popper & Tippy Javascript files (or any Javascript files for that matter) doesn’t seem to work on AnkiWeb on iOS (version 16.0). Neither your Sample Note Type nor my own note type based on your Guide works when opening AnkiWeb in an iOS browser (on Windows, everything works fine, both in the Anki app and in a browser). In the Javascript console the following error is logged: TypeError: Importing a module script failed, but I haven’t had much luck figuring out what exactly is going wrong.
Edit: Upon further investigation, the second issue also happens on Safari on a MacBook, so the culprit seems to be Apple’s WebKit. This time the console log is a bit more informative, also showing Failed to load resource: the server responded with a status of 404 () – https://ankiuser.net/study/_popper.min.js. So all of this is caused by the dynamic import statement looking in the wrong directory (https://ankiuser.net/study/ and not https://ankiuser.net/study/media/), which is likely the result of not respecting the <base href> tag (see here for the corresponding bug report on WebKit’s bug tracker). However, this can easily be fixed by adapting the import script as follows:
function getAnkiPrefix() {
return globalThis.ankiPlatform === "desktop" ?
"/" :
globalThis.AnkiDroidJS ?
"https://appassets.androidplatform.net/" :
typeof window.webkitConvertPointFromNodeToPage === 'function' ? // i.e. a WebKit browser
document.baseURI : // see https://bugs.webkit.org/show_bug.cgi?id=201692
"./"
}
/* ... */
async function loadScript(script) {
var scriptPromise = import (`${getAnkiPrefix()}${script.url}`)
/* ... */
}
Before Tippy, I had been using the abbr function to insert tooltips into my flashcards. Could someone help me convert the abbr function to tippy? I think this is best done with regex search and replace, but I’m stuck on trying to insert
aria-expanded="false"
into the abbr function. Replacing the other parts of the abbr function is easy and would work without regex.
Here are the differences between the two:
<a data-tippy-content="Content" aria-expanded="false">keyword</a>
<abbr title="Content">keyword</abbr>
It’s seem don’t work in editor in version 2.1.55
The shortcut and menu work very sporadically.
Doesn’t work with flexible cloze and enhanced cloze addon, when tooltip inside cloze.