Make dropdown trigger type with hover

[zoltanszogyenyi]

We should add an option to trigger the dropdown menu by more trigger types, such as hover, not just click.

It should be accessible via a data attribute such as data-dropdown-trigger="hover" where by default it's click.

This should be also added as an option for the Dropdown object.

File to be modified: https://github.com/themesberg/flowbite/blob/develop/src/components/dropdown.js

We should also update the docs and show a "hover" dropdown example too: https://flowbite.com/docs/components/dropdowns/

[zoltanszogyenyi]

Hey peeps,

I have introduced the hover option for the Dropdown component via this commit (2017908) and this will be released for the next v1.6.3 version of Flowbite.

I have tried to make it as accessible as possible for screen readers, keyboards, and mobile devices so it should work quite smoothly - though generally speaking we would advise against using the hover functionality when possible and use click.

The reason for this is because the user's expectation may be different and showing dropdowns on hover may interfere with the normal experience and flow of the user's cursor - that's why we added a default 300ms delay before showing or hiding the dropdown.

Here's a great read about using dropdown on hover from Smashing Magazine:

https://www.smashingmagazine.com/2021/05/frustrating-design-patterns-mega-dropdown-hover-menus/

Cheers,
Zoltan