Open Lexachoc opened 2 months ago
I have came up a temporary fix for this issue : For Popover: https://github.com/Lexachoc/flowbite/blob/374890fcf3bdc1bba29d12e966f3dea262ee5d58/src/components/popover/index.ts#L123C1-L127C21
this._hideHandler = () => {
setTimeout(() => {
if (!this._targetEl.matches(':hover')) {
this.hide();
}
}, 100);
+ setTimeout(() => {
+ if (!this._targetEl.matches(':hover')) {
+ this._targetEl.style.transform ='';
+ }
+ }, 100);
};
For Tooltip:
this._hideHandler = () => {
this.hide();
+ setTimeout(() => {
+ this._targetEl.style.transform ='';
+ }, 100);
};
For the case when Clipboard is used with tooltip, the above snippet for tooltip must be changed again so that the final solution is as follows: (The problem is that the success tooltip message is shown and the default tooltip message is hidden when we click the trigger, but we don't want the tooltip to lose its transformation position until we move the mouse out of the trigger). https://github.com/Lexachoc/flowbite/blob/25d7ea34a776202922b148f528e1151ea9d73a56/src/components/tooltip/index.ts#L115C1-L119C21
this._hideHandler = () => {
this.hide();
+ setTimeout(() => {
+ if (!this._targetEl.matches('.opacity-100.visible')) {
+ this._targetEl.style.transform ='';
+ }
+ }, 100);
};
All the above codes clear the value of the "transform" property after 100 ms after hiding the popover/tooltip
Describe the bug
Extra white space in the right side of page due to popover after window resize
To Reproduce Steps to reproduce the behavior: Create a popover close to the right side of the page, and then resize the window (make it smaller in width)
You will see white space in the right side of page due to the
transform
property of the popover.Expected behavior I think if the popover is hidden, the "transform" property should be removed in order to resolve the issue.
The tooltip component is also affected when positioned near border sides.
Screenshots
Desktop (please complete the following information):