How to edit the bootstrap margin in css or js?

Asked

Viewed 396 times

1

Good evening guys, I’m implementing a Popover on my page, but I’m doing it inside a table that is inside a Jumbotron, the problem occurs of 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 positioning wrong. 

   $(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>
    <link rel="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:

javascript jquery css bootstrap popover

1 answer

1


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

Like the can is created dynamically, 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>
<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>
<link rel="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>

  • Strange I can see clearly your solution working when I run the code here in stackoverflow, but when I run this code here it does not change anything, what is the reason? I’m racking my brain trying to make it work

  • @Publioelon I made a small modification to the script. I was using bootstrap 4, which makes a big difference to the 3, which is what you are using.

  • to using 4 also see by link the file name: <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

  • @Publioelon Truth.If possible, make a Jsfiddle and post all your HTML so I can take a look. Sometimes there is something else causing conflict.

  • OK I put in jsfiddle: https://jsfiddle.net/f4Lp5o2d/ the HTML is a little bit messed up, but the part of the contents of Jumbotron/Popover where the problem is exactly the way it appears to me

  • 1

    @Publioelon I think now it will. There was a problem: The script I made had to be inside Document ready tb.

  • nice too bro! gave it right!

Show 2 more comments

Browser other questions tagged javascript jquery css bootstrap popover

You are not signed in. Login or sign up in order to post.