Search code examples
jquerycsstwitter-bootstrappopover

Bootstrap popover list

I'm making for my university a project to the bootstrap popover and I'm trying to add the list for the popover.

I don't know where to add this list, you can see my sample.

Click on the Select category after display popover,

I need like this list,(look sample image) anyone please help me to add this,

enter image description here

This is my sample code:

$(document).ready(function(){
    $('[data-toggle="popover"]').popover();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="form-group">
  <a href="#"  data-toggle="popover" data-placement="bottom" data-content="Content"><input class="form-control input-sm" id="category" type="text" placeholder="Select category">
  </a>
</div>

<div class="form-group">
  <input class="form-control input-sm" id="Description" type="text" placeholder="Description">
</div>

<div class="form-group">
  <input class="form-control input-sm" id="Date" type="text" placeholder="Date">
</div>

<div class="form-group">
  <input class="form-control input-sm" id="Amount" type="text" placeholder="Amount">
</div>
</div>

Solution

  • This should answer your question.

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

.custom-popover li {
  border: none!important;
  text-align: center;
}

.custom-popover li:nth-child(2) {
  border-top: 1px solid #ccc!important;
}

.custom-popover li:last-child {
  border-top: 1px solid #ccc!important;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="form-group">
  <a href="#" data-toggle="popover" data-placement="bottom" data-toggle="popover" title="Bill Category"><input class="form-control input-sm" id="category" type="text" placeholder="Select category">
  </a>
</div>

<div class="form-group">
  <input class="form-control input-sm" id="Description" type="text" placeholder="Description">
</div>

<div class="form-group">
  <input class="form-control input-sm" id="Date" type="text" placeholder="Date">
</div>

<div class="form-group">
  <input class="form-control input-sm" id="Amount" type="text" placeholder="Amount">
</div>

<title>Bootstrap Example</title>

<!-- loaded popover content -->
<div id="popover-content" style="display: none">
  <ul class="list-group custom-popover">
    <li class="list-group-item">Airport Pickup</li>
    <li class="list-group-item">Food and Beverage</li>
    <li class="list-group-item">Yoga Class</li>
  </ul>
</div>

    Change list items as your preference. You can put links here and style the list however you want it. This should give you a basic idea about how to do it.