Tippyjs: Line break in functionality in tippy

[gomteshhatgine]

When the title message is need to show with bullets.
Then I want show tooltip message containing line break
I tried with \n
also tried "&#013";
But line break didnt work in tippy

[atomiks]

Why not:

<ul>
  <li>...</li>
  <li>...</li>
</ul>

Using a HTML template would be easier

[atomiks]

You can use <br> as title can contain HTML

[Slapbox]

This doesn't work for me in the React version. Am I doing something wrong there?

[atomiks]

@Slapbox

Can use fragments and <br /> element

<Tippy content={
  <>
    line 1
    <br />
    line 2
  </>
}>
  <button />
</Tippy>

[Slapbox]

Thank you @atomiks!

[WilliamVenner]

It would be nice if this was native to tippy, I don't see why \n isn't displayed properly. I do not want to use HTML in tippy because of potential XSS, and escaping it all in JavaScript seems like a lot of wasted effort.

Not everyone uses React.

Here's a workaround:

.tippy-content {
    white-space: pre-line;
}

[atomiks]

I mean the library just uses .textContent to set content by default, which doesn't wrap newlines, and the CSS just uses browser defaults. So that's just a solution rather than a workaround.