mf81bln/index.html

## index.html
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>tribbles demo</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" href="/styles.css">
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <script src="/tribbles.js"></script>
</head>
<body>
  <div class="container">
      <p class="longText">
          Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
      </p>
      <span class="longText">And just for fun - a little bit more text!</span>
  </div>
  <script type="application/javascript">
      $('.longText').tribbles();
  </script>
</body>
</html>

## styles.css
body * {
  box-sizing: border-box;
}
.container {
  border: solid 1px #4b5faa;
  width: 150px;
  padding: 3px;
}
.container * {
  /* just to render all elements by same style */
  margin: 0;
  padding: 0;
  display: block;
  /* next three lines does the ... magic */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

## tribbles.js
(function($) {
    $.fn.extend({
        tribbles: function() {
            $.each(this, function() {
                var elem = $(this);
                if(elem[0].scrollWidth > elem[0].offsetWidth) {
                    elem.tooltip({
                        items: "*",
                        content: elem.html()
                    })
                }
            })
        }
    })
})(jQuery);
	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>tribbles demo</title>
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
	<link rel="stylesheet" href="/styles.css">
	<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
	<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
	<script src="/tribbles.js"></script>
	</head>
	<body>
	<div class="container">
	<p class="longText">
	Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
	</p>
	<span class="longText">And just for fun - a little bit more text!</span>
	</div>
	<script type="application/javascript">
	$('.longText').tribbles();
	</script>
	</body>
	</html>
	body * {
	box-sizing: border-box;
	}
	.container {
	border: solid 1px #4b5faa;
	width: 150px;
	padding: 3px;
	}
	.container * {
	/* just to render all elements by same style */
	margin: 0;
	padding: 0;
	display: block;
	/* next three lines does the ... magic */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	}
	(function($) {
	$.fn.extend({
	tribbles: function() {
	$.each(this, function() {
	var elem = $(this);
	if(elem[0].scrollWidth > elem[0].offsetWidth) {
	elem.tooltip({
	items: "*",
	content: elem.html()
	})
	}
	})
	}
	})
	})(jQuery);