CODEWITHSUNDEEP
csstwitter-bootstrap
user3140714
user3140714

Reputation: 85

Bootstrap popover text in divs overlaps without space

HTML:

<a href="#" data-container="body" data-id="54" data-toggle="popover" data-placement="left">

Popover on left

Javascript:

$('*[data-id]').mouseenter(function(event) {
        var e=$(this);
        var content = '<div class="row"><div class="col-xs-12"><div class="col-xs-8">
Element1Element1 Element1Element1Element1Element1Element1Element1 Element1Element1Element1Element1Element1Element1 Element1Element1Element1Element1</div><div class="col-xs-4">Element 2</div></div>';






    e.popover({html:true,placement:'bottom', animation: false, 
        delay:   { show: 1500, hide: 100 }, content: content}).popover('show')

});

It works fine but only if string in content contains spaces. If theres no spaces text overlaps with second div.

JS Fiddle: http://jsfiddle.net/9Nt48/

How i can fix this?

Upvotes: 1

Views: 2196

Answers (2)

AyB
AyB

Reputation: 11665

This is the problem with continuous text, CSS will automatically place it in next line for you if it seems to overlap with the other divs but it doesn't have much of a choice when you don't give a space, this is because it doesn't know when to break, so you can specify it like:

.popover-content {
    word-wrap:break-word;
}

Since your columns already have the width specified, if the text inside the div exceeds it, break it at that point.

DEMO

Upvotes: 1

Mohamad
Mohamad

Reputation: 35349

This is because your markup is wrong. A row in Bootstrap is what nests your columns. You have nested columns inside other columns, which is not correct.

<div class="row">
  <div class="col-xs-12">
   Element1Element1 Element1Element1Element1Element1Element1Element1        Element1Element1Element1Element1Element1Element1 Element1Element1Element1Element1
  </div>
</div>

You also only need to use row and col-x-x classes is if you want to use columns in the tooltip. So you don't really have to use them if you are displaying simple text.

Finally, if you want multiple rows of text, just a p element to split the text.

Caveat: I'm not actually sure you can use the grid inside tooltips. So you might be better off using simple text without columns...

Upvotes: 1

Related Questions