Tooltip arrow outline is not visible

[shinokada]

Describe the bug

All light tooltip arrow has no border.

To Reproduce Go to the tooltip page

Expected behavior

Have a border.

Screenshots

Desktop (please complete the following information):

System:
    OS: macOS 12.6
    CPU: (8) arm64 Apple M1
    Memory: 83.02 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node
    npm: 8.15.0 - ~/.nvm/versions/node/v16.17.0/bin/npm
  Browsers:
    Brave Browser: 105.1.43.93
    Chrome: 105.0.5195.125
    Chrome Canary: 108.0.5325.0
    Firefox: 105.0.1
    Safari: 16.0

[zoltanszogyenyi]

Hello @shinokada,

Thanks for reporting, I'll fix this in the next minor release.

[stri8ed]

This is still an issue, as seen on the official demo:

[Lexachoc]

@zoltanszogyenyi @shinokada @stri8ed

Here's the fix using CSS:

[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='top'] > [data-popper-arrow]:after {
    border-width: 0 1px 1px 0;
}

[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='right'] > [data-popper-arrow]:after {
    border-width: 0 0 1px 1px;
}

[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='bottom'] > [data-popper-arrow]:after {
    border-width: 1px 0 0 1px;
}

[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='left'] > [data-popper-arrow]:after {
    border-width: 1px 1px 0 0;
}

[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='top'] > .tooltip-arrow:before,
[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='right'] > .tooltip-arrow:before,
[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='bottom'] > .tooltip-arrow:before,
[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='left'] > .tooltip-arrow:before {
    border: 0;
}

:not([data-tooltip-style^='light']) + .tooltip[data-popper-placement^='top'] > .tooltip-arrow {
    bottom: -3px;
}

[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='right'] > .tooltip-arrow {
    left: -5px;
}

[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='bottom'] > .tooltip-arrow {
    top: -5px;
}

:not([data-tooltip-style^='light']) + .tooltip[data-popper-placement^='left'] > .tooltip-arrow {
    right: -3px;
}

:not([data-tooltip-style^='light']) + .tooltip[data-popper-placement^='right'] > .tooltip-arrow {
    right: -4px;
}

The fixed results: Light mode (default: border is missing and has the shifting problem), fixed by above css snippet:

Dark mode (default: no border) has the shifting problem, fixed by above css snippet:

PS: Since the default tooltip style is dark (I assume), I use :not([data-tooltip-style^='light']) in case the data attribute data-tooltip-style is not provided

PS: the last few css classes are to fix the small shifting problem of the arrow in light or dark mode (you have to zoom in to easily see the problem): see https://flowbite.com/docs/components/tooltips/#placement Zoom in more:

Sorry that I don't have TypeScript to build to make a PR, but with CSS I can easily fix the issue.