jQuery extension for elements with overflowing text content

Use this little extension to bind a tooltip showing the elements content to an ID or CLASS of any element which contains text that is longer than the visible part of the element.

HTML

<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <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>

CSS

* {
  box-sizing: border-box;
}
.container {
  border: solid 1px #4b5faa;
  width: 150px;
  padding: 3px;
}
.container * {
  /* just to render all elements by same style */
  margin: 10px 0;
  padding: 0;
  display: block;

  /* next three lines does the ... magic */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.longText {
  cursor: help
}

JavaScript

(function($) {
    $.fn.extend({
        tribbles: function() {
            $.each(this, function() {
                var elem = $(this);
                if(this.scrollWidth > this.offsetWidth) {
                    elem.tooltip({
                        items: "*",
                        content: elem.html()
                    })
                }
            })
        }
    })
})(jQuery);

$('.longText').tribbles();