How to add vertical menu items to Bootstrap popover?

<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <a href="#" data-toggle="popover">Toggle popover</a> </div> <script> $(document).ready(function(){ $('[data-toggle="popover"]').popover(); }); </script>

Something like this should work, here is a JsFiddle Example.

Here I have utilised an existing Bootstrap component, a list-group as an example but you can put any HTML into your popover:

HTML

<!-- body content -->
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <button type="button" class="btn btn-info" data-toggle="popover" title="Popover title">Toggle popover</button>
    </div>
  </div>
</div>

<!-- loaded popover content -->
<ul id="popover-content" class="list-group" style="display: none">
  <a href="#" class="list-group-item">Edit Event</a>
  <a href="#" class="list-group-item">Invite Members</a>
  <a href="#" class="list-group-item">Delete Event</a>
</ul>

jQuery

$(function() {
  $('[data-toggle="popover"]').popover({
        html: true,
        content: function() {
            return $('#popover-content').html();
        }
  });
});

A very useful library which works great with Bootstrap and will likely aid you in your efforts to create asynchronous calls like inline editing, is X-Editable

HTML

jQuery

Recommended topics

Hot tags