CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
rj487
rj487

Reputation: 4634

Bootstrap tooltip wrap and break

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

enter image description here

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.

enter image description here

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

Upvotes: 7

Views: 14050

Answers (4)

Divyanshu Maithani
Divyanshu Maithani

Reputation: 14976

I removed white-space: pre-line; from your .tooltip-inner and added max-width: none;

So now the tooltip will cover the entire view available and only wrap properly when the screen-size is less. Here is a working fork of your fiddle.

Upvotes: 0

Kabukki
Kabukki

Reputation: 108

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

Upvotes: 1

Abhishek Gurjar
Abhishek Gurjar

Reputation: 7476

use

white-space: wrap;

in your css instead of

word-break: break-all;

Upvotes: 0

Mohammad Usman
Mohammad Usman

Reputation: 39322

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>

Upvotes: 16

Related Questions