Home » Jquery » javascript – Popover on vertical scroll-able table is not working (Means popover does not scroll up or down with triggered element)

javascript – Popover on vertical scroll-able table is not working (Means popover does not scroll up or down with triggered element)

Posted by: admin February 22, 2020 Leave a comment

Questions:

I am working on a table (vertical scrollable) where I have to open a popover on click event. But when i scroll up the table, the popover remains on the same position. I want the popover to scroll up or down with the respective element.

https://codepen.io/LAXMI1991/pen/jOPrrpj

$(document).ready(function() {
  $('[data-toggle="popover"]').popover();
});
.fixed_header {
  width: 100%;
}

.fixed_header tbody {
  display: block;
  overflow: auto;
  height: 200px;
  width: 100%;
}

.fixed_header thead tr {
  display: block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="fixed_header">
    <table class="table ">
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Email</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>[email protected]</td>
          <th><a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">...</a></th>
        </tr>
      </tbody>
    </table>
  </div>
</div>
How to&Answer:

This is just a simple fix to your problem but it will not work in complex programming. just give an id or something to your (…) element that toggles the popover.and you need a good CSS practice .

$(document).ready(function(){
    $('[data-toggle="popover"]').popover(); 
  
  var $element = $('[data-toggle="popover"]');

$(window).scroll(function() {
    
    if($(this).scrollTop() > 0) {
        $element.fadeOut(1000);
    } else {
        $element.fadeIn(1000);
    }
});
  $('a').click(function(){
    $('.popover').css({position: 'sticky'});
  });
});
.fixed_header
{
  width:100%;
}
.fixed_header tbody{
  display:block;
  overflow:auto;
  height:200px;
  width:100%;
}
.fixed_header thead tr{
  display:block;
}


/* .popover-body {
    height: 50px;
    overflow-y: auto;
    white-space:pre-wrap;
} */
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
    <div class="fixed_header">
     <table class="table ">
    <thead>
      <tr>
        <th>Firstname</th>
        <th >Lastname</th>
        <th>Email</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
         <th><a href="#"  data-toggle="popover" title="Popover Header" data-trigger="click" data-content="Some content inside the popover" >...</a></th>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
         <th><a href="#" data-toggle="popover" data-trigger="click" title="Popover Header" data-content="Some content inside the popover" >...</a></th>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
         <th><a href="#" data-toggle="popover" data-trigger="focus" title="Popover Header" data-content="Some content inside the popover" >...</a></th>
      </tr>
         <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
            <th><a href="#" data-toggle="popover" data-trigger="focus" title="Popover Header" data-content="Some content inside the popover" >...</a></th>
      </tr>
         <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
            <th><a href="#" data-toggle="popover" data-trigger="focus" title="Popover Header" data-content="Some content inside the popover" >...</a></th>
      </tr>
         <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
            <th><a href="#" data-toggle="popover" data-trigger="focus" title="Popover Header" data-content="Some content inside the popover" >...</a></th>
      </tr>
         <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
            <th><a href="#" data-toggle="popover" data-trigger="focus" title="Popover Header" data-content="Some content inside the popover" >...</a></th>
      </tr>
         <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
            <th><a href="#" data-toggle="popover" data-trigger="focus" title="Popover Header" data-content="Some content inside the popover" >...</a></th>
      </tr>
         <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
            <th><a href="#" data-toggle="popover" data-trigger="focus" title="Popover Header" data-content="Some content inside the popover" >...</a></th>
      </tr>
         <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
            <th><a href="#" data-toggle="popover" data-trigger="focus" title="Popover Header" data-content="Some content inside the popover" >...</a></th>
      </tr>
         <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
            <th><a href="#" data-toggle="popover" data-trigger="focus" title="Popover Header" data-content="Some content inside the popover" >...</a></th>
      </tr>
         <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
            <th><a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover" >...</a></th>
      </tr>
         <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
            <th><a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover" >...</a></th>
      </tr>
         <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
            <th><a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover" >...</a></th>
      </tr>
    </tbody>
  </table>
  </div>
  </div>

</body>
</html>