 <p>Since I had a bunch of other code that needs to normally run in a non-dropdown-hoverable component, I solved this issue by utilizing the native events in bootstraps dropdown.js. The solution found in the other thread which utilized css would <strong>not</strong> work in my case.</p> <p>Below is my solution which is a bit more verbose since I added a timer for visibility and hidden states. If that's removed, the solution is probably close to 8 lines of code.</p> <hr> <pre><code>export default class DropdownHover extends Dropdown { constructor(...args){ super(...args) this.timerIn = null; this.timerOut = null; this.inTime = 250 this.outTime = 100 } config(isInitialized){ super.config(isInitialized) if(isInitialized) return var button = this.$() button.hover(this.mouseIn.bind(this), this.mouseOut.bind(this)) this.dropdown = this.$() } mouseIn(){ if(this.timerIn) { clearTimeout(this.timerIn); this.timerIn = null // If there are any gaps between the dropdown // and the menu this will fix it clearTimeout(this.timerOut); this.timerOut = null } this.timerIn = setTimeout(() =&gt; { this.dropdown .addClass('open') .trigger($.Event('shown.bs.dropdown')) // If you look in dropdown.js this is the event used to trigger other actions. }, this.inTime) } mouseOut(){ if(this.timerOut) { clearTimeout(this.timerOut); this.timerOut = null } this.timerOut = setTimeout(() =&gt; { this.dropdown .removeClass('open') .trigger($.Event('hidden.bs.dropdown')) }, this.outTime) } } </code></pre>