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="should show this when overflowing"><b>nested element</b> resize the window so this span overflows the browser width then hover this element, I'll keep typing a bit more to help it Lorem Ipsum Dolor Sit Amet</span><br>
  <span title="should not show this">no overflow, no tooltip</span>
</body>
</html>
 
span {
  display:inline-block;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
 
$(function() {
  $(document).tooltip({
    open: function(e, ui) {
      var el = $.data(this, 'ui-tooltip').tooltips[ui.tooltip[0].id][0];
      if (el.offsetWidth === el.scrollWidth) {
        ui.tooltip.hide();
      }
    }
  });
});
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers