如何定位Bootstrap弹出式窗口？

本文介绍如何在页面上放置弹出框。 Bootstrap的popover属性可用于使网站看起来更加动态。弹出框通常用于显示有关任何元素的附加信息，并在该元素上单击鼠标指针时显示。它类似于Bootstrap工具提示。但是，弹出窗口可以包含比工具提示更多的内容。

Popovers是用于定位元素的第三方库Popper.js。在bootstrap.js之前必须包含库popper.min.js

句法：

$(function () {
  $('[data-toggle="popover"]').popover()
})

根据需要，有时定位可能非常重要，但是用户需要明确地进行定位，因为默认情况下，Popover将出现在元素的右侧。

示例1：以下代码是HTML，Bootstrap和JavaScript的基本实现。使用数据放置设置已经实现了所有4个方向(向左，向右，向上和向下)的弹出窗口。

html

  

  Bootstrap Example
  
  
  
  
  
  
  

  

  
    Popover Example
    
    
      
        
        
          Top
        
      
      
      
        
        
          Left
        
      
      
      
        
        
          Right
        
      
      
      
        
        
          Bottom
        
      
    
  
  
    // Enable all popovers in the document
    $(document).ready(function () {
      $('[data-toggle="popover"]').popover();
    });
  

  

输出：

示例2：以下示例是顶部悬停弹出窗口，其中，当光标指向按钮时，弹出窗口将触发，而当光标从按钮移出时，弹出窗口将消失。

html

  

  
    Example of Triggering Bootstrap
    Popover on Mouseover
  
  
  
  
  
  
  
  
  
    $(document).ready(function () {
      $('[data-toggle="popover"]').popover({
  
        // Set the placement of 
        // the popup to the top
        placement: 'top',
        trigger: 'hover'
      });
    });
  
  
  
    .pop {
      margin: 150px 50px;
    }
  

  

  
    Bootstrap Popover
  
  
  
    
      Popover-1
    
    
      Popover-2
    
    
      Popover-3
    
    
      Popover-4
    
  

  

输出：