Context Menu Plugin For Bootstrap - jQuery Hummingbird Popover

The Hummingbird Popover plugin utilizes Bootstrap popover component to create a multi-level context menu triggered by right click.

How to use it:

1. Include the needed jQuery library and Bootstrap framework on the webpage.

<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>

2. Include the Font Awesome for the caret icon.

<link rel="stylesheet" href="/path/to/fontawesome.min.css">

3. Include the jQuery Hummingbird Popover plugin's files on the webpage.

<link href="hummingbird-popover.css" rel="stylesheet">
<script src="hummingbird-popover.js"></script>

4. Create the multi-level context menu from a regular HTML unordered list as these:

<div class="hummingbird-popover-converter" id="myContenxtMenu">
  <li>Menu Item 1</li>
  <li>Menu Item 2</li>
  <li>-Menu Item 2.1</li>
  <li>--Menu Item 2.1.1</li>
  <li>--Menu Item 2.1.2</li>
  <li>--Menu Item 2.1.3</li>
  <li>-Menu Item 2.2</li>
  <li>--Menu Item 2.2.1</li>
  <li>--Menu Item 2.2.2</li>
  <li>--Menu Item 2.2.3</li>
  <li>Menu Item 3</li>
  <li>-Menu Item 3.1</li>
  <li>-Menu Item 3.2</li>
  <li>-Menu Item 3.3</li>
</div>

5. Add the data-id attribute to the target element where you want to attach the context menu to.

<div id="demo" data-id="myContenxtMenu">
  Content here
</div>

6. Initialize the plugin by calling the function on the element.

$("#demo").hummingbirdPopover();
$("#demo").hummingbirdPopover("setContent");

7. Destroy the context menu manually.

$("#demo").hummingbirdPopover("destroy");

8. Event handlers which can be used to do something as the user click menu items.

$("#demo").on("hummingbirdPopover_action", function(e,data) {

  if (data.includes("value 1") || data.includes("value 2")) {
    // do something
  }
  if (data == "value 3" || data == "value 4" || data == "value 5") {
    // do something
  }

});

Changelog:

2018-07-01

• JS update

2018-06-04

• return the whole path of the selected option as an array

2018-06-03

• add data-id to pass custom content as JSON

---

This awesome jQuery plugin is developed by hummingbird-dev. For more Advanced Usages, please check the demo page or visit the official website.