Bootstrap tooltip wrap and break

Question

I have a special situation. If I put a long text in the tooltip, it will extend and over the tooltip frame, like this.

After I add this into .tool-inner

word-break: break-all;

it works fine in this case.

However, it still breaks the normal sentence like this.

I've created a jsfiddle to illustrate what I did.

Answer 1

Use word-wrap css property instead of word-break.

The word-wrap property allows long words to be able to be broken and wrap onto the next line.

/* Latest compiled and minified JavaScript included as External Resource */
$('#hoverme1, #hoverme2').tooltip();

/* 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');

body {
    margin: 10px;
}

.tooltip-inner{
  color: red;
  background-color: black;
  word-wrap: break-word;
  text-align: left;
  white-space: pre-line;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
Tooltip example
<br><br><br><br><br><br><br>

<a href="#" id ="hoverme1" data-toggle="tooltip" title="vocabularyvocabularyvocabularyvocabularyvocabularyvocabulary">long vocabulary</a>

<br>

<a href="#" id ="hoverme2" data-toggle="tooltip" title="This is very long sentence, and this is very important!">Nomal sentence</a>

Answer 2

You should use "word-wrap: break-word" instead