How to display the bootstrap popover at the position of the mouse click?

Question

I have created a bootstrap popover whose code is given below. Now i want the popover to show wherever i click on the page. How should i accomplish that?

Currently it appears on the click on "the popover link".

Please help!

HTML:

<br>
<br>
<br>
<br>
<div class="container">
    <div class="span3">


        <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  <a href="#" id="popover">the popover link</a>
        <!-- Changed the bootstrap css for popover maximum width to 800px from 276 px -->
        <div id="popover-head" class="hide"> Event | <a id="appointmentsInformationReference" href="#">Appointments</a> </div>

        <div id="popover-content" class="hide">

                <!-- form-horizontal .controls margin left changed from 180 to 0 px -->

                <form class="form-horizontal" style="margin-top: 15px">

                    <div class="control-group inline" >
                        <label class="control-label" style="width: 75px; text-align: left" for="dateAppointment">Date: </label>
                        <div class="controls pull-left" >
                            <input type="text" id="dateAppointment" placeholder="Date of Appointment">
                        </div>
                    </div>


                    <div class="control-group inline" >
                        <label class="control-label" style="width: 75px; text-align: left" for="namePatient">Name: </label>
                        <div class="controls pull-left" >
                            <input type="text" id="namePatient" placeholder="Name of Patient">
                        </div>
                    </div>

                    <div class="control-group inline">
                        <label class="control-label" style="text-align: left; width: 75px" for="locationAppointment">Where: </label>
                        <div class="controls pull-left">
                            <input type="text" id="locationAppointment" placeholder="Location">
                        </div>
                    </div>
                    <div class="control-group inline">
                        <div class="controls">
                            <button type="createAppointment" class="btn btn-block pull-left" style="width: 45%; margin-top: 10px">Create</button>
                            <button type="editAppointment" class="btn btn-block pull-right" style="width: 45%; margin-top: 10px">Edit</button>
                        </div>
                    </div>
                </form>

        </div>

        <div id="appointmentsInformationContent" class = "hide">
            <p> This is some information about the appointments </p>
        </div>
    </div>

Javascript:

<script>
 $(document).ready(

    $('#popover').popover({
        html : true,
        title: function() {
            return $("#popover-head").html();
        },
        content: function() {
            return $("#popover-content").html();
        },

        placement: 'top'
    }),

    $(document).on('click', '#appointmentsInformationReference', function()
    {
        alert('beep');
    })

 )

</script>

Answer 1

Bootstrap's popover placement can be a function which (I'm guessing) has an event argument, log that in the console and see if it holds mouse position coordinates.

placement: function(x) {
   console.log(x);
}