Creating Tooltips with Images

[DerIshmaelite]

As the title says, I would like to create tooltips that show up as I hover the pointer over them in the card, with text and images in them, spontaneously with a shortcut as I am reviewing (with the help of the Edit Card during Review addon).

The previous Tippy Tooltip addon is broken and I tried contacting the author but it was to no avail…

---

This is the Javascript code from ChatGPT if this brings up any ideas (this of course did not work still)

<div id="content">
  <!-- Existing card content -->
</div>

<style>
.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip {
  border-bottom: 1px dotted black;
  cursor: pointer;
}

.tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: #f9f9f9;
  color: #000;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%; /* Position the tooltip above the text */
  left: 50%;
  margin-left: -100px;
  border: 1px solid #d3d3d3;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>

<script>
document.addEventListener('keydown', function(event) {
  if (event.ctrlKey && event.key === 'e') { // Ctrl + E to edit tooltips
    let tooltips = document.querySelectorAll('.tooltip, .tooltiptext');
    tooltips.forEach(function(tooltip) {
      tooltip.setAttribute('contenteditable', 'true');
      tooltip.focus();
    });
  } else if (event.ctrlKey && event.key === 's') { // Ctrl + S to save tooltips
    let tooltips = document.querySelectorAll('.tooltip, .tooltiptext');
    tooltips.forEach(function(tooltip) {
      tooltip.setAttribute('contenteditable', 'false');
    });
  } else if (event.ctrlKey && event.key === 'n') { // Ctrl + N to create a new tooltip
    let contentDiv = document.getElementById('content');
    let newTooltipContainer = document.createElement('div');
    newTooltipContainer.className = 'tooltip-container';
    
    let newTooltip = document.createElement('span');
    newTooltip.className = 'tooltip';
    newTooltip.setAttribute('contenteditable', 'true');
    newTooltip.innerText = 'New Tooltip';
    
    let newTooltipText = document.createElement('span');
    newTooltipText.className = 'tooltiptext';
    newTooltipText.setAttribute('contenteditable', 'true');
    newTooltipText.innerText = 'Edit this tooltip text';
    
    newTooltipContainer.appendChild(newTooltip);
    newTooltipContainer.appendChild(newTooltipText);
    contentDiv.appendChild(newTooltipContainer);
    
    newTooltip.focus(); // Focus the new tooltip for immediate editing
  }
});
</script>

[jhhr]

That code looks a lot like this tutorial: How To Create Tooltips

The javascript you got from ChatGPT makes me think that you prompted it with something like “I want to create tooltips …” so it gave you code where you create and edit tooltips within the HTML by pressing ctrl+e, ctrl+s etc.

I don’t know if you need javascript code to handle this as the basic tooltip code shown in the W3 tutorial above requires only HTML and CSS. I’m assuming your tooltips content comes from the note fields. Then the gist of it is that you’d do things like this in your card template

Card template

Add the CSS from the tutorial for .tooltip and .tooltiptext to the card CSS. Then do this:

<div className="tooltip">
  {{Some_note_field_you_want_tooltipped}}
  <div className="tooltiptext">
    {{The_note_field_with_the_tooltip_text}}
  </div>
</div>

---

If the text you want tooltipped is not the whole field but some individual words in the field, then you can do the same thing by adding the HTML as part of the field content:

Some_note_field:

Also add the CSS to card CSS

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
<div className="tooltip">
  Curabitur ipsum turpis
  <div className="tooltiptext">
    Pellentesque non mauris id dolor faucibus laoreet. Nullam tellus metus,
  </div>
  fringilla sit amet hendrerit in, fermentum nec felis.
</div>

---

But if there’s some way you want to generate tooltips based on the existing structure of the field content, then you’d need javascript to 1) identify those parts 2) convert those parts to use the tooltip + tooltiptext div structure.

[DerIshmaelite]

Yay, you are back!

But if there’s some way you want to generate tooltips based on the existing structure of the field content, then you’d need javascript to 1) identify those parts 2) convert those parts to use the tooltip + tooltiptext div structure.

Yes, I think that is what I want. I want to be able to take some words inside my card cloze note and convert them into a box, where I hover on it with a pointer for it to then show up as a tooltip upon hovering.

Also, I would really like to be able to do this with images and put them into tooltips. That is my main target.

All this with the help of a shortcut (like Ctrl+T or something)
This is my cloze note field
{{edit:cloze:Text}}

---

This is an excerpt of my cloze note.

• Now I add an image to it with some words next to Zellsäulen (the text in the cloze)
• I then highlight them
• I press Ctrl+T as a shortcut
• they are now hidden in the form of a box
• I then hover the pointer on that box
• Now it is visible as a tooltip
• That tooltip should also be editable as well (and also reversible)
  Basically, I am aiming for something like this (also courtesy to Wikipedia :)

[DerIshmaelite]

I am still trying it out with the older addon and it doesnt seem to work at all. Neither with text (which remains shown at all times not with images)

[Keks]

<div class="tooltip">Hint1
  <span class="tooltiptext">
    Hint2
  </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;
}

–

[DerIshmaelite]

Thank you for the reply keks!

My problem is that I need to be able to do this multiple times inside the reviewer with the help of a shortcut

• Now I add an image to it with some words next to Zellsäulen (the text in the cloze)
• I then highlight them
• I press Ctrl+T as a shortcut
• they are now hidden in the form of a box
• I then hover the pointer on that box
• Now it is visible as a tooltip
• That tooltip should also be editable as well (and also reversible)
  Basically, I am aiming for something like this (also courtesy to Wikipedia :)

---

The current Tooltips addon doesn’t seem to work, let alone work during review, and this seems to be a prevalent problem
(Reddit - Dive into anything)