2

I have to click on a "div" item and move the mouse cursor a bit. But I want to avoid that. I want to show immediately the tooltip when user clicks on a div. How to do that?

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Simple example</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
  <div id="div1" onclick="showTitle('div1')" style="border: 1px solid black; cursor:default">div1</div>
  <div id="div2" onclick="showTitle('div2')" style="border: 1px solid black; cursor:default">div2</div>
  <div id="div3" onclick="showTitle('div3')" style="border: 1px solid black; cursor:default">div3</div>
  <div>...</div>
  <div id="divN" onclick="showTitle('divN')" style="border: 1px solid black; cursor:default">divN</div>
  <script>
    function showTitle(id) {
      $('#' + id).attr('title', 'get some info from the server for "' + id + '" on clicking on it');
      //$('#'+id).trigger('focus'); // not working
      //$('#'+id).hover(); // not working
      //$('#'+id).mouseover(); // not working
      //$('#'+id).trigger('mousemove'); // not working
    }
  </script>
</body>

</html>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
user3719454
  • 994
  • 1
  • 9
  • 24
  • 5
    It's down to the browser renderer when the tooltip gets updated/displayed based on user actions. If you want this behaviour to work immediately, and in all browsers, then you will be best off using a third-party tooltip library. – Rory McCrossan Mar 11 '21 at 08:52
  • This worked sometimes: `$('#' + id).attr('title', 'get some info from the server for "' + id + '" on clicking on it').toggle().toggle(); ` – mplungjan Mar 11 '21 at 09:04
  • See this answer. I think it should do what you want to achieve: https://stackoverflow.com/a/16133224/9342114 – moritzgvt Mar 11 '21 at 09:24
  • If you take the dupe and css to active: `[title]:active + span.createdTooltip { display: block; position: absolute; }` it will also work nicely – mplungjan Mar 11 '21 at 09:29

0 Answers0