Add Comments During Review

[DerIshmaelite]

I am not sure if this already exists in some form.

So how this would work: You have a sentence inside a paragraph and you cannot make way for adding a comment or an image to explain the context or the paragraph would look very messy. (more messy if you are to do this multiple times).

So by adding a placeholder like a box or for example () next to the sentence, and by hovering the pointer over the placeholder during the review, a box is shown with the context and image given, which are editable during reviewing like the addon Edit Cloze During Review allows so.

This would save a lot of space and would make things look a lot neater and enable the addition of context much more easily with the addition of images mid-paragraph.

Something like this…

[Duude]

You mean like a “tooltip”? This sounds like a great idea.
There was once an addon from @kleinerpirat which isn’t supported anymore.
It also doesn’t support editing during preview. But it had a rather similiar functionality, where you could add little boxes which show information while hovering over it.

I might take a look at this sometime in the future. If not @shigeyuki wants to update this old addon.

[DerIshmaelite]

Exactly that. Now that coupled with the added functionality of being editable during review (because you add comments on the go) would make for a great addition to Anki.

[Keks]

If I understood the topic correctly.
Text hint

<a href="#" title="HintHintHintHintHintHintHintHint">Hint</a>

[Keks]

Image hint

<div class="tooltip">Hint
  <span class="tooltiptext">
    <img src="image.jpg" alt="image"/>
  </span>
</div>

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

[Shigeyuki]

@Duude

There was once an addon from @kleinerpirat which isn’t supported anymore.

That add-on is nearly broken, but you can still use it by editing the HTML directly.

[DerIshmaelite]

Thanks for the reply. My point was during the review kind of like what the addon does with the help of the Edit during Cloze addon.

1. So I want to add a tooltip to this sentence

-The boy buys a book.

2. With the help of some sort of a shortcut, like Ctrl+Shift+C for adding a cloze card, in the reviewer without the need to go to the browser edit window with the help of the Edit Cloze during Review addon, a tooltip placeholder is added.

The tooltip can be edited with the text and images needed for context.

So adding the same code each time I need to add a tooltip manually is difficulty, especially if a lot of tooltips will be used.

[DerIshmaelite]

Can you explain how Is there a shortcut you can use to add a tooltip directly during review

[Shigeyuki]

It does not have that feature, it can only add tooltips.

[DerIshmaelite]

Does this still work perhaps? This sounds like that this is what I have in my head (adding tooltips as you go though strikethrough text) except that it probably won’t work for images. Does anyone have a workaround

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

You don’t really need any add-ons for this. I’m using tippy.js - a JavaScript tooltip library - for my template: [Screenshot_20210203-014400] 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 …

[BlueGreenMagick]

This is achievable by modifying note type.

Add a field ‘Tooltip’ to your note type, then modify your note type template to add a tooltip that contains an editable field: {{edit:Tooltip}}

For example, using the code provided by @Keks :

<div class="tooltip">(hint)
  <div class="tooltiptext">
    {{edit:Tooltip}}
  </div>
</div>

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;

If you want a fancier tooltip, you can google ‘CSS tooltip’ and copy the code for a nice looking tooltip.

[DerIshmaelite]

And using this code… How do I trigger adding the actual tooltip? A hotkey perhaps?

Also mind you that I am using cloze notes as my note type, so having a common tooltip field for all the cloze cards would be counterproductive.

[BlueGreenMagick]

@DerIshmaelite

And using this code… How do I trigger adding the actual tooltip? A hotkey perhaps?

If you have ‘Edit Field During Review Cloze’ add-on installed, and in the add-on config you have ‘Ctrl + Click’ enabled, then when you hover over the ‘(hint)’ text while pressing Ctrl (or Cmd on mac), you should be able to edit the ‘Tooltip’ field.

@DerIshmaelite

Also mind you that I am using cloze notes as my note type, so having a common tooltip field for all the cloze cards would be counterproductive.

Do you mean that you want to have different tooltip message for each card in a note? (for ‘c1’, ‘c2’, …)

I can’t think of a way to achieve that with just note type alone. You would probably need to write an add-on for it.

[DerIshmaelite]

Do you mean that you want to have different tooltip message for each card in a note? (for ‘c1’, ‘c2’, …)

Well not really. What I meant is that I could make a tooltip:

• anywhere on the text
• allows for the addition of images as well
• all the while being able to be done inside the reviewer just like the Edit During Review addon allows