0

The title attribute is really useful whenever you want to notify the user or share information regarding a HTML element. It is displayed on hover of the respective element.

But as soon as I click the element, the tooltip gets hidden. How do I keep the tooltip to remain even if the element is clicked.

Note:

  1. I'm aware that I can create a custom tooltip that does this, but i'm looking for a solution using that uses "title" attribute, without creating any new elements in runtime.
    Because HTML by default handles the cases where if the element is at the end of the screen, then the tooltip position is adjusted accordingly.
  2. I found a CSS implementation of this, but with this solution, the tooltip gets hidden if the element is close to the edges of the screen.
  3. I understand that this may not be an ideal use-case for a button, but my use-case for this is to display a tooltip icon ("i") like below

#tooltip {
  cursor: default;
  border-radius: 100%;
  background-color: firebrick;
  font-size: smaller;
  padding: 0 6px;
  color: white;
}
<input type="checkbox" id="myInput" name="myInput" value="This is My Input" />
<label for="inputLabel">This is my Input</label>
<i id="tooltip" title="I would like this to be displayed even if this element clicked">i</i>
Gangula
  • 5,193
  • 4
  • 30
  • 59
  • 1
    I don't think, that it is possible to keep the built-in tooltip displayed on click. That looks like it can only be achieved with custom tool tips. As you have already pointed out. – Geshode Sep 16 '22 at 08:31

0 Answers0