Flowbite Svelte Tooltip JSON格式化失效及箭头不显示问题

问题1：JSON无法格式化显示 #

HTML默认会合并空格和换行，哪怕JSON.stringify生成了带缩进的字符串，在Tooltip里还是会变成单行。解决方法有两种：

• 方法一：用<pre>标签包裹
  <pre>标签会完整保留文本的原始格式（包括换行和缩进），直接把格式化后的JSON放在里面即可：

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

• 方法二：添加CSS样式
  给Tooltip内容添加white-space: pre-wrap样式，既能保留格式，又能自动换行适应容器宽度：

  <Tooltip arrow={true} type="custom" class="p-4 font-medium bg-primary-100 w-2/5">
      <span style="white-space: pre-wrap;">{JSON.stringify(content, null, 4)}</span>
  </Tooltip>
  

问题2：Tooltip箭头不显示 #

你设置了defaultClass=""，这会移除Flowbite Tooltip默认的样式类，其中就包含渲染箭头必需的CSS类。解决方法是不要清空defaultClass，如果需要自定义样式，通过class属性叠加即可：

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

如果确实需要调整默认类，可以在defaultClass里保留箭头相关的类（比如tooltip-arrow），但更推荐直接用class叠加自定义样式，避免破坏默认功能。

修改后的完整代码 #

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

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

内容的提问来源于stack exchange，提问作者noblerare