Use Bootstrap 3 dropdown menu as context menu

Question

Using Bootstrap 3, how can I place the dropdown menu at the cursor and open it from code?

I need to use it on a table as a context menu for its rows.

Answer 1

It is possible. I made you a working demo to give a good start.

Working demo (Right click on any table row to see it in action)

First create your dropdown menu, hide it and change its position to absolute:

#contextMenu {
  position: absolute;
  display:none;
}

Then bind a contextmenu event to your table rows so it shows dropdown/context menu and position it at the cursor:

var $contextMenu = $("#contextMenu");

$("body").on("contextmenu", "table tr", function(e) {
   $contextMenu.css({
      display: "block",
      left: e.pageX,
      top: e.pageY
   });
   return false;
});

Then when user select an option hide dropdown/context menu:

$contextMenu.on("click", "a", function() {
   $contextMenu.hide();
});