Bootstrap Text Overflow Tooltip

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="row">
  <div class="mightOverflow col-xs-1">
  Lorem ipsum dolor sit amet, consectetur
  </div>
  <div class="mightOverflow col-xs-1">
  ちょっと長い文字列が表示されたら
  </div>
</div>
<div class="row">
  <div class="mightOverflow co-xs-4">
  Lorem ipsum dolor sit amet, consectetur
  </div>
  <div class="mightOverflow col-xs-4" id="test">
  ちょっと長い文字列が表示されたら
  </div>
</div>

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

.mightOverflow {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

JavaScript

$.fn.tooltipOnOverflow = function(options) {
	$(this).on("mouseenter", function() {
  	if (this.offsetWidth < this.scrollWidth) {
    	options = options || { placement: "auto"}
    	options.title = $(this).text();
      $(this).tooltip(options);
      $(this).tooltip("show");
    } else {
      if ($(this).data("bs.tooltip")) {
        $tooltip.tooltip("hide");
        $tooltip.removeData("bs.tooltip");
      }
    }
  });
};

$('.mightOverflow').tooltipOnOverflow();