[Bug]: Tooltip Arrow overlaps Content #1306
Description
Reproduction
<TooltipProvider :delay-duration="50">
<Tooltip open>
<TooltipTrigger as-child>
<span>Hover me</span>
</TooltipTrigger>
<TooltipContent>
<p>ggggggggggggg</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>Describe the bug
By just using the tooltip, if letters have descenders they might get covered by the arrow:
This issue is also in the original shadcn-ui: shadcn-ui/ui#6933
How to fix?
Removing every class except for fill-primary on TooltipArrow. The other classes are not needed, since the arrow is already correctly styled by reka-ui
<TooltipArrow class="fill-primary"/>System Info
System:
OS: macOS 15.5
CPU: (12) arm64 Apple M4 Pro
Memory: 3.12 GB / 48.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 22.16.0 - ~/.nvm/versions/node/v22.16.0/bin/node
Yarn: 1.22.22 - /opt/homebrew/bin/yarn
npm: 10.9.2 - ~/.nvm/versions/node/v22.16.0/bin/npm
Browsers:
Chrome: 137.0.7151.120
Safari: 18.5
npmPackages:
@vueuse/core: ^13.4.0 => 13.4.0
nuxt: ^3.17.5 => 3.17.5
shadcn-nuxt: 2.2.0 => 2.2.0
vue: ^3.5.16 => 3.5.17Contributes
- I am willing to submit a PR to fix this issue
- I am willing to submit a PR with failing tests