Tooltip: dark variant arrow shows white border because dark theme has no border utility

[ddeboer]

Updated after further investigation – the original report was partly wrong.

Real issue: dark tooltip arrow shows a white border/triangle

In dark mode the tooltip arrow shows a visible white L-shape / triangle edge.

Cause:

• The tooltip dark variant theme is "bg-dark text-white" (with no border-* utility).
• Without a border utility the popover’s computed border-color falls back to currentColor, which is text-white.
• Arrow.svelte uses border-b border-l border-inherit bg-inherit. Even though the popover has border-width: 0, the arrow has border-b border-l (1px each), and its border-color inherits the popover’s currentColor-based white.
• The arrow’s clip-path then reveals a 1px white L, which reads as a white triangle around the arrow in dark mode.

Workaround (consumer side):

.dark [popover][role='tooltip'] {
  border-color: var(--color-gray-400);
}
.dark [popover][role='tooltip'] .popover-arrow {
  border-color: var(--color-gray-400);
}

Suggested fix upstream: the dark (and possibly auto) tooltip variant should include an explicit border-* utility (e.g. border border-gray-700) so the arrow’s border-inherit picks up a matching color instead of currentColor.

Correction: the light-mode “invisible tooltip” was user error

The originally-reported issue (light-mode tooltip invisible due to [popover] UA background) was not a flowbite-svelte bug. It was caused by a missing init step in our app: we had not imported theme-selector/themes/default.css and had not added @custom-variant dark (...). Once the v2 quickstart is followed properly, the [popover] UA background does not interfere and tooltips render correctly in light mode without any [popover] background override.

Versions: flowbite-svelte 2.0.0-next.10 through 2.0.0-next.14, Tailwind CSS 4, Svelte 5.