When creating my cards I very often have to make references to extra information (mostly legislation and jurisprudence) outside my decks so, in order to make it easier to check this extra info during the study sessions I first customized my decks by adding an extra field where I paste whatever is necessary. However, I found this to be a suboptimal solution.
Making tooltips, on the other hand, suits perfectly my needs as I can embed the reference info directly into the excerpt of the text it relates to.
So, I currently use this approach to make tooltips:
Let’s say there’s a field with some text like “The procedure should be suspended during 15 days, according to the general principle of Law set in Art. 123”.
I open the HTML editor and write: The procedure should be suspended during 15 days, according to the general principle of Law set in <a class="tooltip">Art. 123<span class="tooltiptext">*I paste the text of Art. 123 here*</span></a>.
I paste the following CSS (that I got on the web) under the main text:
<style>
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
I adjust the width and position of the tooltip as part or even all of it may be outside the left margin.
Well… this can take me a huge amount of time, especially when there’s a dozen of references to make.
So, it’d be great if there were an add-on (or even a built-in formatting functionality) that made it possible to create a tooltip by just selecting an excerpt of the text, clicking some menu icon (or pressing some hot key) to open a dedicated editor (something like what the “extended editor for fields” add-on does), writing/pasting the corresponding text, then pressing “Save”.
One tip unrelated to adding such a feature to Anki or creating such an add-on – you can add the CSS to your card styling, so you don’t need to do that part each time (and this has the benefit that you can modify the styling in the future for all of your cards instead if it being something that each card has a copy of that you cannot update in one go).
This is an amazing suggestion, I’d love to have something like this
It can be used in math to show the name of symbols like Îľ for example, it can be helpful for new learners in a shared deck
It can also be used in learning languages for giving the meaning of a strange word in a sentence
This example is part of an etymology search I implemented for medicine (similar to the Amboss add-on).
I also wrote a script that converts strikethrough text (a style I would never use in my cards) into tooltips. So it’s really easy to crate them with default Anki formatting:
Input
Auf eine Notiz rechtsklicken und “Notiztyp wechseln”. = Change Note Type
Output
Maybe I’ll crate a guide on how to include such libraries in your templates sometime soon. I’m currently abroad, so I can’t do much from my phone.
Thank you very much!
I just finished reading it and found very clarifying.
…
Wow, I just saw that you followed my suggestion and built an addon for creating tooltips. That’s awesome!
I’am really excited to test it.
I’m gonna try it then give you feedback.
Thank you again!
