tooltip line break?

[8ctopus]

How does one add a line break inside a tooltip? I've tried both \n and <br> without success.
Here's my code sample:

<a href="#" data-tooltip="By default, search will look for an exact match. If you want to search with an open end, use the asterisk: Joh* Doe which will match both John Doe and Johnny Doe" data-placement="left">?</a>

[8ctopus]

I didn't find how to do it so I decided to switch to an article instead that I display/hide on hover. Here's the code if someone's interested.

document.addEventListener('DOMContentLoaded', function () {
  const hint = document.querySelector('a#tooltip-hint');
  hint.addEventListener('mouseenter', toggleTooltip);
  hint.addEventListener('mouseleave', toggleTooltip);
});

function toggleTooltip(event) {
  const tooltip = document.querySelector('article#tooltip');

  tooltip.style.display = (tooltip.style.display === 'block') ? 'none' : 'block';
}

article#tooltip {
  display: none;
  font-size: 0.875em;
}

<a id="tooltip-hint" href="#">?</a>
<article id="tooltip">
  Lorem ipsum sin amet
</article>

[JonSpeare]

I was thinking the same. Tried <br> and \n but no dice. Would be a good addition.

[matt-the-midnight-hacker]

Not directly a solution but for me using data-placement="left" / data-placement="right" helped to keep the tooltip visible.

[tommy4st]

I'm using this to at least allow line breaks if the text is too long:

[data-tooltip]::before {
    max-width: max(100%, 15rem);
    width: max-content;
    white-space: initial;
    text-indent: 0;
}