data-tip containing html?

[longrunningprocess]

I've seen a few questions related to enriching the formatting of a data-tip but I think my request might be unique, hopefully there's a clever way to solve it though.

I'd like to add a newline in the content (sometimes) but can't figure out a way to do that and then it had me wondering whether that is really out of the scope or intention for the data-tip's content anyway.

I've tried a couple things to no avail:

<div class="tooltip" data-tip="hello \n again">
  <button class="btn">Hover me</button>
</div>

OR

<div class="tooltip" data-tip="hello <br> again">
  <button class="btn">Hover me</button>
</div>

OR

<div class="tooltip" data-tip="hello \a again">
  <button class="btn">Hover me</button>
</div>

Should I accept that this might be asking a little too much of this or is there a clever way to achieve it I haven't tried?

[mark1502]

I asked a similar question and then found yours. It would be nice if we could have this feature because formatted tooltips can really improve the UI. If you find any solution, please post it here. Thanks

[saadeghi]

is there a clever way to achieve it I haven't tried?

There are 2 workaround for that:

https://play.tailwindcss.com/SnTQRTnJKr

<div
  data-tip="line1
line2"
  class="tooltip tooltip-open m-20 before:whitespace-pre-wrap"
>
  <button class="btn">a new line in data-tip</button>
</div>

<div data-tip class="tooltip tooltip-open m-20 before:whitespace-pre-wrap before:[--tw-content:'line1\aline2']">
  <button class="btn">using CSS</button>
</div>

Honestly this tooltip was designed to show a tiny, single line text, not a customizable content so there are limitations.

Another way is to use dropdown with hover: https://daisyui.com/components/dropdown/#open-on-hover

In the future I will provide better ways to show a tooltip with customizable content but at the moment there are many other tasks for daisyUI I have to work on.

Let me know if you have a question.

[mark1502]

Thanks for the suggestions, I'll try them out! And thanks for DaisyUI!

[longrunningprocess]

Honestly this tooltip was designed to show a tiny, single line text, not a customizable content so there are limitations.

I figured it was out of scope for the tooltip, I'm more than ok with that and I actually think it's one of those times you could just push back on people asking for more. It was always just a fancier title in my mind until I ran into this but I intend to look into the dropdown option you shared.

Thanks again for all the amazing things you do for us!