How to prevent Bootstrap from breaking lines automatically in popovers

Question

I want to add a tooltip with Bootstrap's popover like this:

<ul>
     <li>Entry 1 ....................................................................</li>
     <li>Entry 2 ....................................................................</li>
     <li>Entry 3 ....................................................................</li>
</ul>

However, Bootstrap will break the line automatically at some point. I have set html: true and tried to add a div element:

<div style="word-break: keep-all>
<ul>
     <li style="word-break: keep-all"></li>
</ul>
</div>

but it still breaks the line. Is it possible to avoid automatically line breaks and maybe add a horizontal scrollbar instead? How can I even specify the width of the tooltip area?

Answer 1

You'd need to add an overflow-x: scroll; to your .popover-content class, as well as a white-space: nowrap to each li.

https://jsfiddle.net/nrpe1m05/