如何定位 Bootstrap 弹出框？

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

Popovers 是用于定位元素的第三方库Popper.js。库 popper.min.js 必须包含在 bootstrap.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
    
  

  

输出：