Open shinokada opened 1 year ago
Hello @shinokada,
Thanks for reporting, I'll fix this in the next minor release.
This is still an issue, as seen on the official demo:
@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.
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):