Ability to change the text of the 4 rating hovers

I’m talking about the 4 response buttons in the queue. I would for example way prefer the hover of response hard to only say: " Bad (2/4) - Recalled partially. (press C)” than what it says right now.

We discussed this privately and come up with this CSS snippet:

.tooltip {
  display: none;
}

.spacedRepetition .queue__response-button--big {
  position: relative;
}

.spacedRepetition .queue__response-button--big:hover:before {
  display: block;
  position: absolute;
  bottom: calc(100% - 8px);
  border: 1px solid black;
  border-radius: 2px;
  color: black;
  background-color: lightgrey;
  font-size: 15px;
  padding: 3px;
}

.spacedRepetition .queue__response-button--big[data-tip*="(1/4)"]:hover:before {
  content: "Again";
}
.spacedRepetition .queue__response-button--big[data-tip*="(2/4)"]:hover:before {
  content: "Hard";
}
.spacedRepetition .queue__response-button--big[data-tip*="(3/4)"]:hover:before {
  content: "Good";
}
.spacedRepetition .queue__response-button--big[data-tip*="(4/4)"]:hover:before {
  content: "Easy"
}

The problem is that there is no way to select the tooltips (to edit or hide them selectively) because they are not injected locally into the HTML, but appended more or less as child of <body> without any usable class.

1 Like