Fix overflow issue when using Tooltip/Popover #857

Lexachoc · 2024-04-14T16:59:13Z

Strictly speaking, this issue is due to the use of popperjs in flowbite, but it can be fixed from the flowbite side

This is a temporary solution that I used. I use the same timeout of 100ms as the current source code:

flowbite/src/components/popover/index.ts

Lines 117 to 123 in 30b276b

    
           this._hideHandler = () => { 
        
               setTimeout(() => { 
        
                   if (!this._targetEl.matches(':hover')) { 
        
                       this.hide(); 
        
                   } 
        
               }, 100); 
        
           };

cannot set transform='' within the original setTimeout, popperjs will update the position after hiding it

fix

Fix Tooltip overflow issue

Fix Tooltip overflow issue (considering when Clipboard feature is used)

Lexachoc added 4 commits April 10, 2024 01:41

Temp fix for Popover overflow issue

dbd25c0

cannot set transform='' within the original setTimeout, popperjs will update the position after hiding it

Update index.ts

ccec78b

fix

Update index.ts

374890f

Fix Tooltip overflow issue

Update index.ts

25d7ea3

Fix Tooltip overflow issue (considering when Clipboard feature is used)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix overflow issue when using Tooltip/Popover #857

Fix overflow issue when using Tooltip/Popover #857

Lexachoc commented Apr 14, 2024 •

edited

	this._hideHandler = () => {
	setTimeout(() => {
	if (!this._targetEl.matches(':hover')) {
	this.hide();
	}
	}, 100);
	};

Fix overflow issue when using Tooltip/Popover #857

Are you sure you want to change the base?

Fix overflow issue when using Tooltip/Popover #857

Conversation

Lexachoc commented Apr 14, 2024 • edited

Lexachoc commented Apr 14, 2024 •

edited