With the plugin being disabled for mobile use (good idea btw), I think it should be clear that the dropdowns will need to have data-toggle="dropdown" for them to work normally in mobile.

Sub menu is not supported in BootStrap 3 , So i'm using this http://bootply.com/92442

when I use your plugin , Can't open sub menu

Can you fix opening sub menu on hover?

This is a great solution. It works well on a desktop and mobile. There is one feature/issue I am not sure how to approach.

If you have a top level nav item that is clickable on the desktop, it won't work on mobile because clicking on it will just expand the tree. So I figured the quickest solution would be to add that top level nav item as the first child item in the tree, so it can be clicked on when the menu is expanded.

So if your example nav item was like this on desktop

CLASSES
   - HISTORY
   - MATH

On mobile it would look like:

CLASSES
   - CLASSES
   - HISTORY
   - MATH

That way, I can have the top navigation item link to an actual page. Is there a way to currently handle something like this?

I'm bringing data dynamically into the view and to debug I created the same page without Angular JS and it works perfectly.

Thanks for your Patience!

<div class="btn-group">
        <%= link_to bootstrap_icon(:edit), {}, :class => "btn btn-mini", "data-toggle" => "tooltip", :title => "foo" %>
        <%= link_to bootstrap_icon(:trash), {}, :class => "btn btn-mini" %>
        <a class="btn btn-primary btn-mini dropdown-toggle pull-right" data-toggle="dropdown" data-hover="dropdown" href="#"><i class="icon-user icon-white"></i> Options <span class="caret"></span></a>
        <ul class="dropdown-menu"> <%#-- :singular key (not to confuse with "singular" string) is to indicate that this operation does not handle 'bulk' selections --%>
            <li><%= link_to({:action => :destroy, :controller => :reseller, :id => reseller}, {:remote => true, :confirm => "Are you sure?", :class => "item-option-remote"}) do %><i class="icon-trash"></i> Delete<% end %></li>
        </ul>
    </div>

The example above only have hover dropdown toggle on "Options button, but if you hover over "edit" or "trash" icons, the hover of the "Options" menu also gets invoked. The expected behavior would be similar to how the default button dropdown data-toggle works, where it only shows the dropdown if the dropdown button is pressed, not any other button in the btn-group.

twitter-bootstrap-hover-dropdown.min.js do not work with Bootstrap 2.2.2, I must used twitter-bootstrap-hover-dropdown.js to make the function works in the body

Hi,

I'm new to Github and jquery and wanted to share some enhancements I made - not sure if you would like to include them:

1. added ability to define different window sizes for each icon's popup window.
2. when using email, the popup window would remain open - enhanced to close it by allow you to set the class to nopop or pop.
3. changed twitter to use the Twitter Web Intents and added via as a value that can be included. This does require the twitter widgest.js be included in the html.
4. changed facebook to use the feed dialog (looks nicer). This does require the facebook sdk to be included in the html.

Following is the new script. Feel free to use my changes if you want.

/*
 * jQuery.share - social media sharing plugin
 * ---
 * @author Carol Skelly (http://in1.com)
 * @version 1.0
 * @license MIT license (http://opensource.org/licenses/mit-license.php)
 * ---
 */
;
(function ($, window, undefined) {

    var document = window.document;

    $.fn.share = function (method) {

        var methods = {

            init: function (options) {
                this.share.settings = $.extend({}, this.share.defaults, options);
                var settings = this.share.settings,
                    networks = this.share.settings.networks,
                    theme = this.share.settings.theme,
                    via = this.share.settings.via,
                    redirect = this.share.settings.redirect,
                    orientation = this.share.settings.orientation,
                    affix = this.share.settings.affix,
                    margin = this.share.settings.margin,
                    pageTitle = this.share.settings.title || $(document).attr('title'),
                    pageUrl = this.share.settings.urlToShare || $(location).attr('href'),
                    pageDesc = "";

                $.each($(document).find('meta[name="description"]'), function (idx, item) {
                    pageDesc = $(item).attr("content");
                });

                // each instance of this plugin
                return this.each(function () {
                    var $element = $(this),
                        id = $element.attr("id"),
                        u = encodeURIComponent(pageUrl),
                        t = encodeURIComponent(pageTitle),
                        d = pageDesc.substring(0, 250),
                        href,
                        rel,
                        popup;

                    // append HTML for each network button
                    for (var item in networks) {
                        item = networks[item];
                        href = helpers.networkDefs[item].url;
                        rel = helpers.networkDefs[item].rel;
                        popup = helpers.networkDefs[item].popup;
                        href = href.replace('|u|', u).replace('|u|', u).replace('|t|', t).replace('|d|', d).replace('|140|', t.substring(0, 130)).replace('|v|', via).replace('|r|', redirect);
                        $("<a href='" + href + "' title='Share this page on " + item + "' rel='" + rel + "' class='" + popup + " share-" + theme + " share-" + theme + "-" + item + "'></a>").appendTo($element);
                    }

                    // customize css
                    $("#" + id + ".share-" + theme).css('margin', margin);

                    if (orientation != "horizontal") {
                        $("#" + id + " a.share-" + theme).css('display', 'block');
                    } else {
                        $("#" + id + " a.share-" + theme).css('display', 'inline-block');
                    }

                    if (typeof affix != "undefined") {
                        $element.addClass('share-affix');
                        if (affix.indexOf('right') != -1) {
                            $element.css('left', 'auto');
                            $element.css('right', '0px');
                            if (affix.indexOf('center') != -1) {
                                $element.css('top', '40%');
                            }
                        } else if (affix.indexOf('left center') != -1) {
                            $element.css('top', '40%');
                        }

                        if (affix.indexOf('bottom') != -1) {
                            $element.css('bottom', '0px');
                            $element.css('top', 'auto');
                            if (affix.indexOf('center') != -1) {
                                $element.css('left', '40%');
                            }
                        }
                    }

                    // bind click
                    $('.pop').click(function () {
                        var rel = $(this).attr("rel");
                        var winSpecs = winSpecsArray[rel];
                        window.open($(this).attr('href'), '', winSpecs);
                        return false;
                    });


                }); // end plugin instance
            }
        }

        var helpers = {
            networkDefs: {
                facebook: {
                    url: 'https://www.facebook.com/dialog/feed?app_id=537304962984013&display=popup&caption=|t|&link=|u|&redirect_uri=|r|',
                    rel: '0',
                    popup: 'pop'
                },
                twitter: {
                    url: 'https://twitter.com/intent/tweet?url=|u|&via=|v|&text=|140|',
                    rel: '1',
                    popup: 'pop'
                },
                googleplus: {
                    url: 'https://plusone.google.com/_/+1/confirm?hl=en&url=|u|',
                    rel: '2',
                    popup: 'pop'
                },
                email: {
                    url: 'mailto:?subject=|t|&body=|u|',
                    rel: '0',
                    popup: 'nopop'
                }
            }
        }

        var winSpecsArray = ['toolbar=0,resizable=1,status=0,width=640,height=320',
            'toolbar=0,resizable=1,status=0,width=550,height=440',
            'toolbar=0,resizable=1,status=0,width=600,height=600'
        ];

        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method "' + method + '" does not exist in social plugin');
        }

    }

    $.fn.share.defaults = {
        networks: ['facebook', 'twitter', 'linkedin'],
        theme: 'icon',
        autoShow: true,
        margin: '3px',
        orientation: 'horizontal',
        useIn1: false
    }

    $.fn.share.settings = {}

})(jQuery, window);

$('#socialshare').share({
    networks: ['email', 'facebook', 'googleplus', 'twitter'],
    theme: 'square',
    via: 'TruthDeception',
    redirect: 'http://sandbox.truthaboutdeception.com/close_dialog.html'
});

The close_dialog.html page is simply:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>If this window does not close automatically, 
  use the Close button to close it.</p>
<script>
    window.close();
</script>
</body>
</html>

In IE9 shouldHover() return always a value greater 0.

Tested under Win7

Stumbled across a potential issue for Windows phones. When you touch the drop down menu, it will automatically close again after the amount of delay you set.

Thought it may have been just my implementation, but I went to the demo page linked from here and the behaviour is the same. Desktops, iPhone and iPad all seem to be fine.

This is on the Windows Phone 8S produced by HTC.

Any help appreciated, thanks.

Steps to reproduce (you can use the Demo page):

1. Hover mouse cursor over "Dropdown" menu item at the top. The drop-down menu should appear.
2. Without moving the mouse, click on "Dropdown" menu item again. The drop-down menu should disappear again.
3. Move the mouse cursor to the left and off the "Dropdown" menu item. The drop-down menu should flash (appear and quickly disappear). Please fix so that the menu doesn't appear again in this scenario.

Although this is not a common user behavior, it does happen (it happened to me, that's how I came across it).

One issue I run into with clients is they always want the menu to work on hover, and for the parent to be clickable. For example about use - /about/ and then sub pages below that like contact, history, etc...

This would be similar to how superfish menu works.

There's missing events trigger on:
'shown.bs.dropdown'
'hidden.bs.dropdown'

Hi,
in previous version of your script I had everything working really nice and the only problem was multilevel submenus where if there was a second level submenu it had a tendency to open other submenus in second level when hovering over a 1st level submenu and I am glad to see thats working now.
On mobile it all worked great if you clicked on parent once it opened the submenu so all you had to do to navigate to parent was click it twice and all is working great.
But now on mobile devices if I click on parent it does not open a submenu and navigates straight to the parent menu so there is no way to open and navigate to submenus. By now you probably figured that my parent menus are actual links and not #
however even if make my parent menu as # it will open the submenu but if you click on submenu item it will just hide it instead of navigating to it.

Curious if this is present/uploaded in a cdn ( like cdnjs.com , say ) to pull the versions from the same.

Would help integration much, in that case.

Thanks in advance.

Hi Cameron, I have been using your plugin and works really good, but the problem is when you have a third level of navigation. Is the plugin prepared for that? Is any way to fix it? Right now the dropdown disappears when you roll over the option what has a second level dropdown...
Thanks advance for any help you can bring :-)
Dani

Hello and thanks for this great plugin.
I'm not sure whether this is a bug: this issue came up when doing end-to-end testing.

• When I hover over the button, the dropdown opens as expected.
• When I close the dropdown with a click on the parent button (in stead of hovering out immediately) and move the mouse out of the button area the dropdown still gets triggered. It opens, then closes even though the end-user already closed the dropdown manually.

Some users will close the menu manually even though it is a hover dropdown. It's just because they don't realize it will close on mouseout.

would it be best to disable the click event on the $parent when dropped down? I'm not sure what the best way is to proceed, would like your opinion on this, maybe a hint on how best to proceed?

Cheers

Please add the Version in the header comment section

Hi,
I notice that when I mouse over a menu, dropdown-menu just open and it is fine. Then, I try to click it, the dropdown-menu will close this is also correct. And then, I mouse out, here I notice the 'bug' the dropdown-menu will open again and close immediately.

Is there any way can prevent that happen?
I also notice that in your 'Plugin Demo' site the top 'navbar', the first-child dropdown does works very well while the rest after has the same bug. I wonder how did you make it the first-child dropdown working perfectly but not the rest after.

Thanks.

Thank you for producing this. I am not a web development expert so this may not actually be a bug. I've implented your code with a recent version of bootstrap and everything is all fine and good. It works. I am using Rails 4.0.8 and bootstrap-sass 3.2.0.0. The problem is this:

If I am on on the root of the site and link back to the root route 'hover' stops working. Basically it seems like hover stops working whenever I link back to the same page that I'm currently on. Does this make sense? If it is too confusing let me know and I'll push an example up to heroku.

Hello

Is there a way to preserve the state of an active menu item?
We use the menu in Wordpress, when a topic is active the parent LI entry gets the class "active".
Would be great if on hovering on a menu other then the active, the active sub-menus would hide. As soon we have a mouse out, the active one should be visible again.

Thanks!
Aldo

When you place <script src="twitter-bootstrap-hover-dropdown.js"></script> in <head>, this part of code

$('<div class="nav-collapse collapse" style="display:none;" id="cwspear-is-awesome">.</div>').appendTo('body');

doesn't work, because the <body> doesn't exist. So shouldHover() always return null and plugin doesn't work.
Examples: script in <head>, script before </body>

How could disable dropdown on hover when navbar is collapsed?

Thanks,

Regards,
Jose A.

I found this cool plugin using bower. would be very helpful if you used gitgub version tags. That's makes it easy to integrate with bower.

thanks!!

I guess the title is limpide, but just to be sure :

Is this possible to make the .dropdown-toggle following the href ?

Since we do not need to click to open the dropdown, it will be nice to re-enable the link! ;-)

For now, I've added an ugly thing :

$('.dropdown-toggle')
.dropdownHover()
.on('click', function () {
    document.location.href = this.href;
});

Thank's!

Hi,

Thanks for building this. It adds a lot of functionality to dropdowns.

I was wondering if there is a way to make the hover drop down only fire when the user hovers over a certain part of the tab, such as the caret in your example. Any thoughts on this?

Thanks,

Jerry

The data-delay option seems to don't work with submenu. Might be more an issue of how core bootstrap handle the submenu...

Hello,

What you think about including an additional option like data-mouseenter-delay="xxx" for the delay of the mouse enter? On a horizontal menu its often annoying if you move the mouse from top to the middle and the menu is opening immediately.

Cheers,
Dominic

Hi,

first of all thank you for this great bootstrap plugin. I was just about to create this functionality on my own when I found yours :) However, I need it to behave in a special way and I'm not sure if your plugin can support this already.

Is it possible to keep a dropdown menu open, e.q. the dropdown menu of the current webpage?

Let's say I have a Navbar with 3 menu items: "Home", "About Us" and "Services". Each one has a dropdown menu. Now I click open the page "About Us". On this page I want to keep the dropdown menu of the "About Us" menu item always open.

When I hover over the menu item "Services", its dropdown menu should open and hide the other dropdown menus. This is no problem. I can set "data-close-others" to "true". But when I move the mouse pointer away from "Services" menu item and the delay time has elapsed, all dropdown menus are deactivated.

How can I reopen (or keep open) the dropdown menu of the current page?

So that the menus don't just "pop" appear, perhaps a css or jquery to fade them in over .25 seconds?

When using SASS-Bootstrap through Bower I think the plugin is downloading the normal bootstrap because its a dependency, is there any way round this?

The span you add to test for Responsive CSS, 'cwspear-is-awesome', is being added to the DOM and never getting removed. This gives 11px (height) of whitespace at the bottom of the page. Why can't it be removed after the test? Here's how I changed it on my local, which appears to work:

(function($, window, undefined) {
// pure win here: we create these spans so we can test if we have the responsive css loaded
// this is my attempt to hopefully make sure the IDs are unique
var canHover = false;
$('.').appendTo('body'); //your cwspear-is-awesome gets appended here, not displaying for some reason
canHover = $('#cwspear-is-awesome').is(':visible');
$('#cwspear-is-awesome').remove();
var shouldHover = function() {
return canHover;
};

Let me know if you see any issues with just adding it, testing it, and removing it.

Thanks.

I am loading a menu through a separate include using the jQuery load() method. When the menu is loaded however, the dropdown functionality is broken. Do you know of a way to modify the script so the dropdown will still work if the menu is loaded through jQuery?

Currently I have this working.

Instead of

<a href="@Model.Url" class="dropdown-toggle" data-toggle="dropdown">

I do this:

<a href="@Model.Url" class="whatever" data-toggle="dropdown">

and then:

$('.dropdown-toggle').dropdownHover(options);
$(".whatever").click(function ()
{
     window.location = this.href;
});

Would be great if there was a simpler way of getting this out of the box.

I'm trying to make it so that my primary/parent menu links are clickable, I noticed what I believe to be something similar in the closed issues: #8

Essentially, I have 2 links on my primary menu that have dropdowns, but I also need the parent link itself to be clickable.. just trying to figure out the easiest way to do this. Thanks.

I have tested in all browsers and for some strange reason, it doesn't seem to be working in Chrome (latest version).

I am getting an error:

Error: Syntax error, unrecognized expression: .

Are you sure your plugin should start with ; ?
in: ;(function($, window, undefined) {

I am using jQuery 1.9.1

could automatically detect data-hover attribute after document ready

I wasn't really expecting it to work out of the box as bootstrap dosn't work anyway with dropdowns so I took the time to find the problem. IE6 basically dosn't like the open css I couldn't figure out why though so I altered your code to apply the display style

Here is the updated code all that is changed is forcing the display block/none style onto the dropdown-menu element. It probabl should have a browser check in there but I saw no adverse effects in any browser including devices

/*

• Project: Twitter Bootstrap Hover Dropdown

• Author: Cameron Spear

• Contributors: Mattia Larentis
  *

• Dependencies?: Twitter Bootstrap's Dropdown plugin
  *

• A simple plugin to enable twitter bootstrap dropdowns to active on hover and provide a nice user experience.
  *

• No license, do what you want. I'd love credit or a shoutout, though.
  *

• http://cameronspear.com/blog/twitter-bootstrap-dropdown-on-hover-plugin/
  */
  ;(function($, window, undefined) {
  // outside the scope of the jQuery plugin to
  // keep track of all dropdowns
  var $allDropdowns = $();

  // if instantlyCloseOthers is true, then it will instantly
  // shut other nav items when a new one is hovered over
  $.fn.dropdownHover = function(options) {

  // the element we really care about
  // is the dropdown-toggle's parent
  $allDropdowns = $allDropdowns.add(this.parent());
  
  return this.each(function() {
      var $this = $(this).parent(),
          defaults = {
              delay: 500,
              instantlyCloseOthers: true
          },
          data = {
              delay: $(this).data('delay'),
              instantlyCloseOthers: $(this).data('close-others')
          },
          options = $.extend(true, {}, defaults, options, data),
          timeout;
  
      $this.hover(function() {
          if (options.instantlyCloseOthers === true)
          {
              $allDropdowns.removeClass('open');
          }
  
          window.clearTimeout(timeout);
          $(this).addClass('open');
          $(this).find('.dropdown-menu').css('display', 'block');
      }, function ()
      {
          timeout = window.setTimeout(function ()
          {
              $this.removeClass('open');
              $this.find('.dropdown-menu').css('display', 'none');
          }, options.delay);
      });
  });
  

  };

  $(document).ready(function() {
  $('[data-hover="dropdown"]').dropdownHover();
  });
  })(jQuery, this);

Hi,
First, thanks for your work on this.
I get this error with version 2.0.7:
ReferenceError: event is not defined
https://backend.wpn.local/js/bootstrap-hover-dropdown/bootstrap-hover-dropdown.js
Line 68

// this helps with button groups!
$this.hover(function () {
    // this helps prevent a double event from firing.
    // see https://github.com/CWSpear/bootstrap-hover-dropdown/issues/55
    if(!$parent.hasClass('open') && !$parent.is(event.target)) {
        // stop this event, stop executing any code
        // in this callback but continue to propagate
        return true;
    }
    openDropdown();
}); 

I think that the fix is to add event as arguments of the function

$this.hover(function (event) { ... }

Thanks
Emmanuel

Hi Cameron

For accessibility reasons I believe the hover dropdowns should also work when in focus as well as on hover.

Currently it does not, so when I tab through my elements the hover functionality stays hidden. Would there be an easy way to include this in the plugin?

I found this... http://stackoverflow.com/questions/2052366/jquery-accomodating-both-hover-and-focus-together-mouse-and-keyboard ... regarding bind, but not sure how to implement it.

This plugin keeps track of the dropdowns on page load but does not work with elements loaded via AJAX. Tried modifying it to use .on() but failed.

Is there any workaround?

Hello,

I note that with the new update, when i am in a menu with multi submenu.

I open one and i want to change to another, the first doesnt close.

Check the picture, the website is available at http://mutuelles-france-afrique.com/

On small screens, where the bootstrap navbar collapses, and the menu is then shown vertically if expanded, the hover behavior is quite disruptive and not useful.

We should find a way to suppress it..

Hi!

Thanks for making this useful plugin!

I read a bit through the issues and noticed that this plugin should be disabled with in mobile or tablet view. However, this is not the case. Hover while in mobile or tablet works even on your demo. http://cameronspear.com/demos/twitter-bootstrap-hover-dropdown/

I have the attributes listed in this way
"class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">"

Is there something else I need to do? I'm presuming not since this should be working automatically according to your documentation.

Hi great plugin, works nicely!

However, I'm having trouble changing the script to fade in ( or possibly slide down) the .dropdown sub-menu. I've tried using .fadeToggle(500); in place of each .show(); and .hide(); but it doesn't make any difference at all, the sub-menu just appears and disappears without any animation effects.

Any ideas how I can achieve this?

Thanks in advance :)

Great work by the way.

I wanted the hover to work on PC but when testing on touch devices the hover JS code was interfering with the standard drop down event in bootstrap. I got around it by simply adding in some JS code to wrap your library and load it only if the browser does not support touch (eg: desktop)

Wrapping code

var isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0));
if (!isTouch) {
// then load the JS code
}

Perhaps it would be better to incorporate this into your library so it only activates hover on devices which are not touch enabled and don't require a hover.

Hi- when using the plug-in on the desktop so the menu is triggered by hovering, if there is an href attribute, I would like it to load the page referenced.

Example:

Hair Accessories

• Baby Headbands
• Clippies
• Head Wraps
• Headbands

If you are hovering over Hair Accessories and you click, it would take you to that page. Is that possible?

My nav has dropdowns with a long list of links (11). On screens below 768px, I've set Bootstrap to replace the nav with the collapsed menu. Using this hover.js works fine, except the long list creates a vertical slider and when I move the slider down to see more links, the list closes. Ideas welcome.

So that the menus don't just "pop" appear, perhaps a css or jquery to fade them in over .25 seconds?

Can there be a configurable delay before opening a dropdown?

1. Hover over menu item.
2. Keep mouse hovered until X milliseconds.
3. Dropdown appears.