How can I create a Bootstrap popover from Javascript?

Question

I am creating a page with a series of analog clocks that can contain meetings (if there is a meeting, that period of time is highlighted blue on the clock), where each analog clock represents a different day.

I am trying to make it so that if you click on a part of the analog clock where a meeting is already scheduled (i.e. that section is blue), a Bootstrap Popover shows up displaying details about the meeting. I am handling clicking in a file called piechart.js, but currently I only know how to create popovers with buttons that are built into the html.

If I want to handle this click in piechart.js, and create a popover located at that specific clock, containing that specific meeting information (which is stored in a file called meeting.js, i understand how to obtain the meeting info from there), how do I accomplish this using javascript? I am new to these languages so bear with me! Thank you!

Answer 1

To create a new popover with JavaScript, you can use the popover() function.

To determine which days already have a meeting scheduled, we can add a custom data-booked property.

The selector $('[data-booked="true"]') is an attribute selector and will only display a popover for that particular button.

If you click on the button for the day which is booked (today) you will see a popover, but if you click on the other button, nothing will show up, because that day has not been booked.

var times = ["8:00", "9:00", "10:00", "11:00", "12:00", "1:00"];

function randomTime() {
    return times[Math.floor(Math.random() * times.length)];
}

$('[data-booked="true"]').popover({ 
  html: true,
  title: "<span class='booked'>This is booked</span>", 
  content: "Meeting at " + randomTime() 
});

.button-group {
  margin: 50px;
}

.booked {
  background: blue;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="button-group">
  <button data-booked="true" class="btn btn-success" id="today">Today</button>
  <button data-booked="false" class="btn btn-warning" id="tomorrow">Tomorrow</button>
</div>