In Bootstrap, how do I get individual tooltips to not wrap

Question

I have a JSFiddle here:

http://jsfiddle.net/3sxez0v8/

At the moment, both tooltips wrap.

I can get both tooltips to wrap by following:

How do you change the width and height of Twitter Bootstrap's tooltips?

.tooltip-inner {
    max-width: 350px;
    width: 350px; 
}

but this causes both tooltips not to wrap.

How do I get just the first tooltip not to wrap?

Answer 1

I would use template in options to apply different html content with different classes for wrap and nowrap like below:

$(function () {
    $('[data-toggle="tooltip"]').tooltip({template:'<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'})
})

$(function () {
    $('[data-toggle="tooltip-nowrap"]').tooltip({template:'<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner nowrap"></div></div>'})
})

http://jsfiddle.net/9k3Lbtr6/1/

Answer 2

Bootstrap allows you to render your tooltip with rich HTML content by leveraging the html: option. As such, you can replace normal whitespace characters with non-breaking white-space characters to force content not to wrap.

You could leverage jQuery's $.each() function and a simple regex .replace() to automate this process. Add classes on the button to determine when to apply the forced one line. You will have to make the window narrow (horizontally) to see the effect.

http://jsfiddle.net/dixalex/vqgj8brs/1/

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

<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>

$('[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"
    });
  }
});