Tiny and fast jQuery plugin for multi-layer popovers (Bootstrap Context Menu)

In this tutorial I am going to share a Tiny and fast jQuery plugin for multi-layer popovers The Hummingbird Popover plugin. This Plugin utilizes Bootstrap popover component to create a multi-level context menu triggered by right click.
Bootstrap Context Menu
Features:

  • Opens popover menues on right mouse click.
  • Based on simple HTML lists.
  • Can be attached to any HTML element.
  • Supports multiple layer menues.
  • Supports multiple popovers on one page.
  • Dynamical change of popover content.
  • Add custom data via data-id



Libraries

Add the following libraries for the hummingbird-popover to function correctly

<!-- CSS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="hummingbird-popover.css" rel="stylesheet" type="text/css">
 
<!-- JS -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="hummingbird-popover.js"></script>

HTML

Create an HTML element as bindpoint for the popover. The id and data-id can be chosen arbitrarily. However, it is important that the data-id of the bindpoint and the id of the popover “structure”, i.e. the list containing the popover content, are equal.

<div id="demo" data-id="myContenxtMenu" class="well">
      <h2>Right Click On Me</h2>
      <p class="lead">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
  </div>




Create a simple structure for the popover content. The class must be hummingbird-popover-converter and the id must be equal to the data-id of the bindpoint (see above). The hyphens indicate the level and the belonging of the popover items. This means that items of one popover can have a popover by themselves.

<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>

JS

Initialize hummingbird-popover and bind it to the HTML element (#example). Then create the popover content by calling the setContent() method.

$(function() {  
 $("#example").hummingbirdPopover();
 $("#example").hummingbirdPopover("setContent");
});

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.