Von*_*per 4 javascript css jquery bootstrap-popover bootstrap-4
我希望它像 Bootstrap 3 一样工作。当我在悬停弹出框上有一个带有滚动条的下拉菜单时，我认为 Bootstrap 4 有问题。我需要溢出：隐藏；使下拉滚动，但弹出窗口也隐藏了。我尝试使用，container:'body'但没有用。
$(document).ready(function() {
$('[data-toggle="popover"]').popover({
html: true,
container: 'body'
});
});.dropdown-menu{
height: 150px;
overflow: hidden;
overflow-y: auto
}<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Dropdowns</h2>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#" title="Header" data-toggle="popover" data-placement="right" data-trigger="hover"data-content="Some content">Link 1</a></a>
<a class="dropdown-item" href="#" title="Header" data-toggle="popover" data-placement="right" data-trigger="hover" data-content="Some content">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
<a class="dropdown-item" href="#">Link 4</a>
<a class="dropdown-item" href="#">Link 5</a>
<a class="dropdown-item" href="#">Link 6</a>
<a class="dropdown-item" href="#">Link 7</a>
<a class="dropdown-item" href="#">Link 8</a>
<a class="dropdown-item" href="#">Link 9</a>
</div>
</div>
</div>还有一些问题与popper.js，以及它是如何定位的下拉列表中，popovers和工具提示。解决方案是data-boundary将弹出窗口上的选项设置为window...
$(document).ready(function() {
$('[data-toggle="popover"]').popover({
});
});.dropdown-menu{
height: 150px;
overflow: hidden;
overflow-y: auto
}<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Dropdowns</h2>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#" title="Header" data-boundary="window" data-toggle="popover" data-placement="right" data-trigger="hover"data-content="Some content">Link 1</a></a>
<a class="dropdown-item" href="#" title="Header" data-boundary="window" data-toggle="popover" data-placement="right" data-trigger="hover" data-content="Some content">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
<a class="dropdown-item" href="#">Link 4</a>
<a class="dropdown-item" href="#">Link 5</a>
<a class="dropdown-item" href="#">Link 6</a>
<a class="dropdown-item" href="#">Link 7</a>
<a class="dropdown-item" href="#">Link 8</a>
<a class="dropdown-item" href="#">Link 9</a>
</div>
</div>
</div>