CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap-3popover
Saqib
Saqib

Reputation: 1129

Break text to multiple lines in bootstrap popover content

I am trying to add text content of bootstrap popover with multiple lines. I am creating string with possible line break as below, I have tried \n, \r\n, <br>, <br/> and <br /> but all vain.

     var files = 'No files selected';
        if (path.length > 1) {
            files = '';
            for (var i = 0; i < path.length - 1; i++) {
                files += path[i] + '<br />';
            }
        }
     $(this).attr('data-content', files);
     $(this).popover('toggle');

from above code what input do I get in popover is shown below

enter image description here

I have read in some posts to add / update popover contents through content tag but didn't work. Plus there was a post to set HTML content for the popover which I didn't get. I don't know what to do to create new lines by using above method or similar one.

Upvotes: 8

Views: 23356

Answers (2)

Gurpreet Singh
Gurpreet Singh

Reputation: 383

You need to pass the option HTML: true when you initialize the popover. Then
and other HTML tags should work:

$(".foo").hover(function () {
    $(this).popover({
        title: "Bar",
        content: "Line 1 <br /> Line 2 <br /> Line 3",
        html: true
    }).popover('show');
}, function () {
    $(this).popover('hide');
});

Upvotes: 0

Anticom
Anticom

Reputation: 1013

You could either add data-html="true" or do that in JS. For the JS solution please refer to How do you add line break to JQuery popover .

Upvotes: 32

Related Questions