Good night everyone, I'm implementing a popover on my page, but I'm doing it inside a table that is inside a jumbotron, the problem occurs from the first 3 lines where the popover appears far from where it should appear, my intention is to figure out how to target or "targetar" in css, or figure out how to change in js and css this wrong placement.
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
})
.jumbotron .container i{
margin-top:15px;
margin-left:120px;
color:white;
float:left;
cursor:pointer;
}
.jumbotron p{
color:white;
}
.jumbotron table{
color:white;
}
div .jumbotron{
height:361px;
border-radius:12px;
background-color:#6de073;
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">Plug seu celular na moda</h1>
<p>Atendimento das 10:00 às 22:10 de Segunda-feira à Sábado!
<p>
<table style="width:100%">
<th data-trigger="hover" data-toggle="popover" data-placement="left" title="Título do Popover" data-content="Exemplo de Popover em ação!">Politicas</th>
<th data-trigger="hover" data-toggle="popover" data-placement="left" title="Título do Popover" data-content="Exemplo de Popover em ação!">Serviços</th>
<th data-trigger="hover" data-toggle="popover" data-placement="left" title="Título do Popover" data-content="Exemplo de Popover em ação!">Informação</th>
</tr>
<tr>
<td data-trigger="hover" data-toggle="popover" data-placement="top" title="Título do Popover" data-content="Exemplo de Popover em ação!">Formas de Pagamento</td>
<td data-trigger="hover" data-toggle="popover" data-placement="left" title="Título do Popover" data-content="Exemplo de Popover em ação!">Prazo de Troca</td>
<td data-trigger="hover" data-toggle="popover" data-placement="left" title="Título do Popover" data-content="Exemplo de Popover em ação!">Troca de Películas</td>
</tr>
<tr>
<td data-trigger="hover" data-toggle="popover" data-placement="top" title="Título do Popover" data-content="Exemplo de Popover em ação!">Descontos</td>
<td data-trigger="hover" data-toggle="popover" data-placement="left" title="Título do Popover" data-content="Exemplo de Popover em ação!">Políticas de Troca</td>
<td data-trigger="hover" data-toggle="popover" data-placement="left" title="Título do Popover" data-content="Exemplo de Popover em ação!">Manutenção</td>
</tr>
<tr>
<td data-trigger="hover" data-toggle="popover" data-placement="top" title="Título do Popover" data-content="Exemplo de Popover em ação!">Sorteios</td>
<td data-trigger="hover" data-toggle="popover" data-placement="left" title="Título do Popover" data-content="Exemplo de Popover em ação!">Regulamento de Trocas</td>
<td data-trigger="hover" data-toggle="popover" data-placement="left" title="Título do Popover" data-content="Exemplo de Popover em ação!">Encomendas</td>
</tr>
<tr>
<td data-trigger="hover" data-toggle="popover" data-placement="top" title="Título do Popover" data-content="Exemplo de Popover em ação!">Fornecedores</td>
<td data-trigger="hover" data-toggle="popover" data-placement="left" title="Título do Popover" data-content="Exemplo de Popover em ação!">Reembolso</td>
<td data-trigger="hover" data-toggle="popover" data-placement="left" title="Título do Popover" data-content="Exemplo de Popover em ação!">Atendimento ao Cliente</td>
</tr>
</table>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
Follow the code below: