Bootstrap Text Overflow Tooltip

by Talsja

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/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

@import url('//cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.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();