Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/redmond/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <span title="tooltip1">Element with tooltip<b>nested element</b></span><br>
  <span title="tooltip2">element2</span>
</body>
</html>
 
$(document).tooltip({
  open: function(e, ui) {
    //only the latter points to the element which I want to reference, but requires some workarounds in case of nested elements inside of an element that triggers the tooltip
    console.log(this, e.target, e.currentTarget, e.originalEvent.target);
    
    //this is what I'd like to get without this ugly workaround, the element that triggered the tooltip:
    var el = $(e.originalEvent.target || e.originalEvent.srcElement).closest($(this).tooltip('option', 'items'))[0];
    console.log(el);
    //alternative workaround
    console.log($('[aria-describedby="'+ui.tooltip[0].id+'"]')[0]);
  }
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers