Bootstrap popover hides line breaks

Question

I am using the html code as follows to show the bootstrap popover

<a data-original-title="" data-content="Hi,
           Welcome !

           Sincerely,
             programmer
           "
   data-placement="bottom">
    content
</a>

And I initialized the popover as follows

$(this).popover({
            html:true
        });

All works fine but the problem is the content available in data-content not displayed with the spaces....It removes all the new lines and show it in the single line ....How can i overcome this....

Solution 1

You need to use <br/> for new line in html or use a <pre> tag

Ensure the data-html="true" attribute is present.

Solution 2

You can use white-space: pre-wrap; to preserve line breaks in formatting. There is no need to manually insert html elements.

.popover {
    white-space: pre-wrap;    
}

Solution 3

To add on to Arun P Johny's solution, if you find that your <br /> tags in the data-content value are rendering as plain text in the popover content on the page, add the additional attribute data-html="true", like so:

<a data-content="Hi,<br />Welcome !<br /><br />Sincerely,<br />programmer"
        data-html="true"
        data-placement="bottom">
    content
</a>

Be aware that using data-html="true" does introduce a potential vulnerability to XSS attacks; don't use it with unsanitized user input.

Docs: https://getbootstrap.com/docs/3.3/javascript/#popovers-options

Solution 4

I managed to get this working by adding \n to my popover text where I want the lines to break and adding the following to my stylesheet:

.popover {
    white-space: pre-line;    
}

Thanks for the help, everyone!

Solution 5

We managed to use the styling of white-space: pre-wrap except we found that added extra whitespace to the whole pop-over. Instead we added this styling to the popover-content.

.popover-content {
    white-space: pre-wrap;
}

View more solutions

Comments

[mcNux]

This is brilliant and needs more upvotes. I wasn't aware of the pre-wrap option.

[qbert220]

This also preserves multiple adjacent spaces within the text. white-space: pre-line preserves just the line breaks.

[user2050146]

Excellent ... This works for me <Popover.Content style={{whiteSpace: "pre-wrap"}}>

[DaveL17]

With Bootstrap 5, the required attribute is data-bs-html="true".