How to edit the bootstrap popup margin in css or js?

1

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:

    
asked by anonymous 09.02.2018 / 22:57

1 answer

1

To do this you have to change the behavior of popover via jQuery in a somewhat radical way.

Since popover is dynamically created, the code below overrides the styles when the mouse is passed in the first column of the table:

$(document).ready(function(){ 
  $('[data-toggle="popover"]').popover();
   $("table tr td:first-child, table th:first").on("mouseover", function(){
      var $this = $(this);
      setTimeout(function(){
         $(".popover")
         .removeClass("bs-popover-top bs-popover-bottom")
         .addClass("bs-popover-right")
         .css({
            "top": $this.offset().top - ($(".popover").height()/2)+10+"px",
            "left": $this.offset().left+100+"px",
            "transform":"translate3d(0,0,0)"
         })
         .attr("x-placement","right")
         .find(".arrow")
         .css({
            "top": $(".popover").height()/2-12+"px",
            "left":"-9px"
         });
      }, 10);
   }).on("mouseleave", function(){
      $(".popover").remove();
   });
});
.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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="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><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="Fornecedores!">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>
    
10.02.2018 / 01:23