Bootstrap 4: ¿Por qué no se muestra el popover dentro del menú desplegable desplegable?
Quiero que esto funcione igual que Bootstrap 3. Cuando tengo un menú desplegable con barra de desplazamiento en el elemento emergente emergente, y creo que hay un problema con Bootstrap 4. Necesito desbordamiento: oculto; para hacer que el menú desplegable se desplace, pero el popover también está oculto. Traté de usarcontainer:'body' Pero no funcionó.
$(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>