如何在鼠標點擊的位置顯示引導彈出窗口？

Question

我已經創建了一個bootstrap popover，其代碼如下。現在我希望彈出窗口顯示哪裏我點擊頁面。我應該如何做到這一點？

目前它出現在點擊「彈出鏈接」上。

請幫忙！

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

引導的酥料餅的位置可以是（我猜）有一個事件參數的函數，對數，在控制檯，看看它是否保存鼠標位置座標。

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