Bootstrap 4 ToolTip Example

Bootstrap 4 ToolTip Example

by dixalex

HTML

<script src="https://github.com/twbs/bootstrap/blob/master/js/tooltip.js"></script>
<div class="container-fluid">
  <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1"></div>
  <div class="col-lg-10 col-md-10 ">
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
      <button type="button" class="btn btn-default one-line" data-toggle="tooltip" data-placement="top" data-original-title="This is a longer tooltip which SHOULD NOT wrap" data-container="body">Tooltip No Wrap</button>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
      <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-original-title="This is a longer tooltip which SHOULD wrap" data-container="body">Tooltip top 2</button>
    </div>
  </div>
  <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1"></div>
</div>

CSS

.tooltip-inner {
  max-width: 500px !important;
}

TypeScript

$('[data-toggle="tooltip"]').each(function(index, element) {
  var title_text = $(element).data('original-title');
  var convert_white_space = title_text.replace(/ /g, '&#160;');

  if ($(element).hasClass('one-line')) {
    $(element).attr('data-original-title', convert_white_space);
    $(element).tooltip({
      html: true,
      placement: "bottom"
    });
    console.log(convert_white_space);
  } else {
    $(element).tooltip({
      html: true,
      placement: "bottom"
    });
  }
});