Svelte Flowbite Tooltip not showing prettified JSON

I am building a simple Svelte application to show JSON in a tooltip. However, it is not show prettified (nicely formatted) JSON.

I am using the Flowbite Svelte Tooltip.

MyComponent.svelte

<script>
    import { Tooltip } from 'flowbite-svelte'
    export let content
</script>

<div>
    <div>Content</div>
    <Tooltip arrow={true} type="custom" defaultClass="" class="p-4 font-medium bg-primary-100 w-2/5">
        {JSON.stringify(content, null, 4)}
    </Tooltip>
</div>

The tooltip is showing up fine but the JSON that is shown is all in a single line instead of being nicely formatted (human readable). I’ve tried JSON.stringify(content, null, '\t')

Like this:

How do I get the JSON to show up in the tooltip in a nicely formatted way and not all in a single line.

As a separate issue, the tooltip arrow is now appearing despite me having arrow={true} so not sure about that either.

>Solution :

It’s a matter of whitespace handling, setting white-space to something like pre-wrap should work.