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>