'How can I create a Bootstrap popover from Javascript?

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!

javascripthtmlcssbootstrap-popover


Solution 1:[1]

Since the blue color is most likely controlled by a style sheet class change, just find the element with that class and apply the popover. I did this with mouseover event on a datatables.net grid (During createdRow method, I added 'someclass' to the rows to distinguish them from other tds on the page.)

function setPopover() {

    $('.someclass').on('mouseenter', function (e) {
        $('.someclass').not(this).popover('destroy');
        var InstId = $(this).find("td:first-child").html();
        var InstName = $(this).find("td:first-child").next("td").html();
        if (!$(this).data("bs.popover")) {

            $(this).popover({
                placement: 'right',
                trigger: 'manual',
                html: true,
                title: InstName,
                content: function () {
                    return $.ajax({
                        url: '@Url.Action("ControllerMethod", "Controller")',
                        data: { id: InstId },
                        dataType: 'html'                            
                    }).responseText;
                }
            });

        }

        $(this).popover('show');
    });
}

Solution 2:[2]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Bryan Hobbs
Solution 2

Related Questions