PHPackages                             istvan-ujjmeszaros/bootstrap-dropdown-hover - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. istvan-ujjmeszaros/bootstrap-dropdown-hover

ActiveLibrary[Utility & Helpers](/categories/utility)

istvan-ujjmeszaros/bootstrap-dropdown-hover
===========================================

Open dropdown menus on mouse hover, the proper way.

4.2.0(7y ago)1565748[2 issues](https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover/issues)Apache-2.0JavaScript

Since Jun 25Pushed 7y ago11 watchersCompare

[ Source](https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover)[ Packagist](https://packagist.org/packages/istvan-ujjmeszaros/bootstrap-dropdown-hover)[ Docs](https://www.virtuosoft.eu/code/bootstrap-dropdown-hover/)[ RSS](/packages/istvan-ujjmeszaros-bootstrap-dropdown-hover/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (4)DependenciesVersions (10)Used By (0)

Bootstrap Dropdown Hover [![Build Status](https://camo.githubusercontent.com/38b1fa5478b944c0f8152c2a5c31c4bc44f5b8918a9c28e60264b66bdc770dae/68747470733a2f2f7365637572652e7472617669732d63692e6f72672f69737476616e2d756a6a6d65737a61726f732f626f6f7473747261702d64726f70646f776e2d686f7665722e706e673f6272616e63683d6d6173746572)](https://travis-ci.org/istvan-ujjmeszaros/bootstrap-dropdown-hover)
=======================================================================================================================================================================================================================================================================================================================================================================================================

[](#bootstrap-dropdown-hover-)

Bootstrap Dropdown Hover is a simple plugin which opens Bootstrap dropdown menus on mouse hover, the proper way.

Demo
----

[](#demo)

Check the [official website](http://www.virtuosoft.eu/code/bootstrap-dropdown-hover/) for a demo.

Why I made it, when there are many solutions already?
-----------------------------------------------------

[](#why-i-made-it-when-there-are-many-solutions-already)

I had issues with all the previously existing solutions. The simple CSS ones are not using the `.open` class on the parent element, so there will be no feedback on the dropdown toggle element when the dropdown menu is visible.

The js ones are interfering with clicking on `.dropdown-toggle`, so the dropdown menu shows up on hover, then it is hiding when clicking on the `.dropdown-toggle` element, and moving out the mouse will trigger the dropdown menu to show up again. Some of the js solutions are braking iOS compatibility, some plugins are not working on modern desktop browsers which are supporting the touch events.

That's why I made this proper plugin, which prevents all these issues by using only the standard Bootstrap javascript API, without any hack.

Usage
-----

[](#usage)

1. Download the latest tag from the [releases page](https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover/releases) or get it via **bower**:

```
$ bower install bootstrap-dropdown-hover
```

2. Include **jQuery** and **Bootstrap**:

```

```

3. Include plugin's code:

```

```

4. Call the plugin:

Initiate on all dropdowns/dropups method 1

```
$.fn.bootstrapDropdownHover({
  // see next for specifications
});
```

Initiate on all dropdowns/dropups method 1

```
$('[data-toggle="dropdown"]').bootstrapDropdownHover({
  // see next for specifications
});
```

Initiate on navbar menu only

```
$('.navbar [data-toggle="dropdown"]').bootstrapDropdownHover({
  // see next for specifications
});
```

Specifications
--------------

[](#specifications)

### Initialization parameters object

[](#initialization-parameters-object)

When calling `bootstrapDropdownHover()` you can pass a parameters object with zero or more of the following:

- `clickBehavior`, `'sticky'`|`'default'`|`'disable'`|`'link'`, defaults to `sticky`, which means that if we click on an opened dropdown then it will not hide on mouseleave but on a second click only. Can be `default`, which means that means that the dropdown toggles on hover and on click too, `disable`, which disables dropdown toggling with clicking when mouse is detected (so it will open on hover only) or `link` which is like `disable`, but does not prevent the default browser action (i.e. link clicks).
- `hideTimeout`, integer, defaults to `200`, how much time the hovered dropdown hides after mouseleave (in milliseconds).

These settings can also be set via HTML5 data attributes on the element itself, e.g. this will override both default and explicit constructor settings:

```

```

### Methods

[](#methods)

You can modify the behavior of the plugin by calling its methods, all of which accept a `value`.

To call methods on any dropdown hover instance, use the following syntax:

```
$(selector).bootstrapDropdownHover(methodName, parameter);
```

Here are the available methods:

- `setClickBehavior(value)` to change the `clickBehavior` parameter.
- `setHideTimeout(value)` to change the `hideTimeout` parameter.

Furthermore, you can call:

- `destroy()` to restore the original behavior.

Structure
---------

[](#structure)

The basic structure of the project is given in the following way:

```
├── dist/
│   ├── jquery.bootstrap-dropdown-hover.js
│   └── jquery.bootstrap-dropdown-hover.min.js
├── src/
│   └── jquery.bootstrap-dropdown-hover.js
├── .editorconfig
├── .gitignore
├── .jshintrc
├── .travis.yml
├── bootstrap-dropdown-hover.jquery.json
├── bower.json
├── Gruntfile.js
├── index.html
└── package.json

```

#### [dist/](https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover/tree/master/dist)

[](#dist)

This is where the generated files are stored once Grunt runs.

#### [src/](https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover/tree/master/src)

[](#src)

Contains the source file.

#### [.editorconfig](https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover/tree/master/.editorconfig)

[](#editorconfig)

This file is for unifying the coding style for different editors and IDEs.

> Check [editorconfig.org](http://editorconfig.org) if you haven't heard about this project yet.

#### [.gitignore](https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover/tree/master/.gitignore)

[](#gitignore)

List of files that we don't want Git to track.

> Check this [Git Ignoring Files Guide](https://help.github.com/articles/ignoring-files) for more details.

#### [.jshintrc](https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover/tree/master/.jshintrc)

[](#jshintrc)

List of rules used by JSHint to detect errors and potential problems in JavaScript.

> Check [jshint.com](http://jshint.com/about/) if you haven't heard about this project yet.

#### [.travis.yml](https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover/tree/master/.travis.yml)

[](#travisyml)

Definitions for continous integration using Travis.

> Check [travis-ci.org](http://about.travis-ci.org/) if you haven't heard about this project yet.

#### [bootstrap-dropdown-hover.jquery.json](https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover/tree/master/bootstrap-dropdown-hover.jquery.json)

[](#bootstrap-dropdown-hoverjqueryjson)

Package manifest file used to publish plugins in jQuery Plugin Registry.

> Check this [Package Manifest Guide](http://plugins.jquery.com/docs/package-manifest/) for more details.

#### [Gruntfile.js](https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover/tree/master/Gruntfile.js)

[](#gruntfilejs)

Contains all automated tasks using Grunt.

> Check [gruntjs.com](http://gruntjs.com) if you haven't heard about this project yet.

#### [package.json](https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover/tree/master/package.json)

[](#packagejson)

Specify all dependencies loaded via Node.JS.

> Check [NPM](https://npmjs.org/doc/json.html) for more details.

Building
--------

[](#building)

To build and test the plugin, you need:

- [**NodeJS**](www.nodejs.org) with **npm**
- **bower** (install it with `npm install bower --g`)
- **grunt-cli** (install it with `npm install grunt-cli --g`)

Then, `cd` to the project directory and install the required dependencies:

```
$ npm install
$ bower install
```

To run jshint on the plugin code, call:

```
$ grunt jshint
```

To build the output js and css files, with the related minified ones, run:

```
$ grunt
```

Issues and Contributions
------------------------

[](#issues-and-contributions)

You can report any issue you may encounter on the [GitHub Issue Tracker](https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover/issues).

To contribute, please follow the [contribution guidelines](https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover/blob/master/CONTRIBUTING.md).

History
-------

[](#history)

Check [Release](https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover/releases) list.

License
-------

[](#license)

```
  Copyright 2015 István Ujj-Mészáros

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.

```

###  Health Score

37

—

LowBetter than 83% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity27

Limited adoption so far

Community22

Small or concentrated contributor base

Maturity69

Established project with proven stability

 Bus Factor1

Top contributor holds 73.7% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~167 days

Recently: every ~291 days

Total

8

Last Release

2814d ago

Major Versions

1.0.4 → 4.0.02018-04-09

### Community

Maintainers

![](https://www.gravatar.com/avatar/96f321253b7dbb1dcbf9587084dd2ac593d9cea49e7107f0081e8a6d47a7560b?d=identicon)[istvan-ujjmeszaros](/maintainers/istvan-ujjmeszaros)

---

Top Contributors

[![istvan-ujjmeszaros](https://avatars.githubusercontent.com/u/1273763?v=4)](https://github.com/istvan-ujjmeszaros "istvan-ujjmeszaros (28 commits)")[![hkmaly](https://avatars.githubusercontent.com/u/4201080?v=4)](https://github.com/hkmaly "hkmaly (4 commits)")[![rbu](https://avatars.githubusercontent.com/u/65913?v=4)](https://github.com/rbu "rbu (3 commits)")[![dwt](https://avatars.githubusercontent.com/u/57199?v=4)](https://github.com/dwt "dwt (2 commits)")[![SebT](https://avatars.githubusercontent.com/u/2361380?v=4)](https://github.com/SebT "SebT (1 commits)")

---

Tags

uibootstrapdropdownhover

### Embed Badge

![Health badge](/badges/istvan-ujjmeszaros-bootstrap-dropdown-hover/health.svg)

```
[![Health](https://phpackages.com/badges/istvan-ujjmeszaros-bootstrap-dropdown-hover/health.svg)](https://phpackages.com/packages/istvan-ujjmeszaros-bootstrap-dropdown-hover)
```

###  Alternatives

[snapappointments/bootstrap-select

The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with Bootstrap 4 support.

9.8k480.4k3](/packages/snapappointments-bootstrap-select)[cwspear/bootstrap-hover-dropdown

An unofficial Bootstrap plugin to enable Bootstrap dropdowns to activate on hover and provide a nice user experience.

1.3k153.1k](/packages/cwspear-bootstrap-hover-dropdown)[techlab/smartwizard

The awesome jQuery step wizard plugin

79096.2k2](/packages/techlab-smartwizard)[bootflat/bootflat

An open source Flat UI KIT based on Bootstrap (3.3.0). A faster, easier and less repetitive way for web developers to create elegant web apps.

4.2k3.3k](/packages/bootflat-bootflat)[harvesthq/chosen

Chosen is a JavaScript plugin that makes select boxes user-friendly. It is currently available in both jQuery and Prototype flavors.

385.2M12](/packages/harvesthq-chosen)[vsn4ik/bootstrap-submenu

Bootstrap Sub-Menus

46310.3k](/packages/vsn4ik-bootstrap-submenu)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)