My hover silently fails...

[phpwalter]

BS 4 Chrome 67

The sample MD code does not fire, nether does mine...

    <div class="navbar-nav ml-auto navbar-right">
        <div class="navbar-brand" >{{ name }}</div>
            <div class="dropdown" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="false">
                <div  role="button"  >
                    <span class="mb-0 avatar-icon avatar-big avatar-22" ></span>
                </div>
                <div id="menu1" class="dropdown-menu dropdown-menu-right">
                    <button class="dropdown-item" type="button">
                        <a href="{{ path_for('signup') }}" class="nav-link">Sign up</a>
                    </button>
                    <button class="dropdown-item" type="button">
                        <a href="{{ path_for('signin') }}" class="nav-link">Sign in</a>
                    </button>
                </div>
            </div>
        </div>
    </div>

What did I do wrong?

[CWSpear]

What is "the sample MD code?"

Chrome 67 is still in Beta. Does it work in Chrome 66?

Do you have a touch-enabled Windows computer?

[leomontenegro6]

I'm having a similar problem: I've used this plugin in some apps developed in Boostrap 3, and it worked just fine. However, I'm trying to use it with Bootstrap 4, and it isn't working.

My guess is that, for now, this plugin will work only on BS 3.

[leomontenegro6]

After fiddling with this plugin source code, I noticed there's some elements and classes that are specific to BS3, and since those elements / classes have changed in BS4, that indeed resulted in bootstrap-hover-dropdown not working in BS4.

However, I was able to make it work in BS4. I had to change a few class names and add a few conditions to get submenus working just as before.

Here's a diff patch, detailing the changes I've made. The patch was created by comparing the original bootstrap-hover-dropdown.js file with the one containing the changes made by me. I done it based on the commit 56c494f, since it's the latest commit containing specific changes on that file in particular.

26c26
<         $allDropdowns = $allDropdowns.add(this.parent());
---
>         $allDropdowns = $allDropdowns.add(this.parent().not('.dropdown-submenu'));
50c50
<                 if(!$parent.hasClass('open') && !$this.is(event.target)) {
---
>                 if(!$parent.hasClass('show') && !$this.is(event.target)) {
61,63c61,68
<                     $this.attr('aria-expanded', 'false');
<                     $parent.removeClass('open');
<                     $this.trigger(hideEvent);
---
>                     if($parent.hasClass('dropdown')){
>                         $this.attr('aria-expanded', 'false');
>                         $parent.removeClass('show');
>                         $this.trigger(hideEvent);
>                         $this.next().removeClass('show');
>                     } else {
>                         $this.removeClass('active');
>                     }
71c76
<                 if(!$parent.hasClass('open') && !$parent.is(event.target)) {
---
>                 if(!$parent.hasClass('show') && !$parent.is(event.target)) {
108c113
<                 
---
> 
113,115c118,143
<                     if(settings.instantlyCloseOthers === true)
<                         $allDropdowns.removeClass('open');
<                     
---
>                     if(settings.instantlyCloseOthers === true){
>                         var $aLinkParent;
>                         if($parent.children('a').hasClass('dropdown-item')){
>                             $aLinkParent = $parent.closest('li.nav-item').children('a')
>                         } else {
>                             $aLinkParent = $parent.children('a');
>                         }
>                         
>                         $allDropdowns.each(function(){
>                             var $dropdown = $(this);
>                             
>                             var $aLink = $dropdown.children('a');
>                             
>                             if($dropdown.hasClass('dropdown')){
>                                 $dropdown.removeClass('show');
>                                 if($aLink[0] == $aLinkParent[0]){
>                                     $aLinkParent.parent().addClass('show');
>                                 } else {
>                                     $aLink.next().removeClass('show');
>                                 }
>                             } else {
>                                 $aLink.removeClass('active');
>                             }
>                         })
>                     }
> 
118,120c146,152
<                     $this.attr('aria-expanded', 'true');
<                     $parent.addClass('open');
<                     $this.trigger(showEvent);
---
>                     if($parent.hasClass('dropdown')){
>                         $this.attr('aria-expanded', 'true');
>                         $parent.addClass('show');
>                         $this.next().addClass('show');
>                     } else {
>                         $this.addClass('active');
>                     }

I've tested it together with bootstrap-submenu plugin, in order to have multiple nested navbars and javascript show on hover simultaneously. They worked together just fine in BS4, just like it was on BS3.

Last but not least, it's worth to mention that once you apply the changes above, it won't work on BS3 anymore, but only on BS4. It still isn't a global solution for multiple BS versions.