How to change popover arrow when target element is not in center?

Question

How to change popover arrow when target element is not in center?

947 Views Asked by Poma At 18 April 2025 at 23:12

I have a following problem. When Popover is moved by Tether so that it remains inside a viewport, its arrow is still in center. On the image below popover is attached to the first picture (where mouse cursor is) but it looks like as if it is attached to a second picture because small arrow is still in center. Is there a way to fix that?

Here is my code

$('.popover-image').popover({
    html: true,
    trigger: 'hover',
    placement: 'bottom',
    constraints: [{
        to: 'scrollParent',
        attachment: 'together',
        pin: true
    }],
    title: $(this).data('title'),
    content: function(){return '<img src="'+$(this).attr('src') + '" />';}
});

Original Q&A

There are 1 best solutions below

**Deep 3015** · Answer 1

Popover on image with image source in popover display

$(document).ready(function(){
    //$('[data-toggle="popover"]').popover(); 
    $('.popover-image').popover({
    html: true,
    trigger: 'hover',
    placement: 'bottom',
    constraints: [{
        to: 'scrollParent',
        attachment: 'together',
        pin: true
    }],
    title: $(this).data('title'),
    container: 'body',
    content: function(){return '<img src="'+$(this).attr('src') + '" class="img-responsive img-center" />';}
});
});

<!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.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  .popover{
    max-width: 50%; /* Max Width of the popover (depending on the container!) */
    position: relative;
  }
  .img-center {margin:0 auto;}
</style>
</head>
<body>

<div class="container">
  <div class="row">
    <div class = "col-sm-4">
      <div class = "caption">
         <p>Some sample text. Some sample text.</p>
      </div>
      <div class = "thumbnail">
         <img src="http://placehold.it/350x150" class="popover-image" data-trigger="hover" title="test image">
      </div>
   </div>
   <div class = "col-sm-4">
     <div class = "caption">
         <p>Some sample text. Some sample text.</p>
      </div>
      <div class = "thumbnail">
         <img src="http://placehold.it/350x150" class="popover-image" data-trigger="hover"  title="test image">
      </div>
   </div>
   <div class = "col-sm-4">
     <div class = "caption">
         <p>Some sample text. Some sample text.</p>
      </div>
      <div class = "thumbnail">
         <img src="http://placehold.it/350x150" class="popover-image" data-trigger="hover" title="test image">
      </div>
   </div>
  </div>

   <div class="row">
    <div class = "col-sm-4">
      <div class = "caption">
         <p>Some sample text. Some sample text.</p>
      </div>
      <div class = "thumbnail">
         <img src="http://placehold.it/350x150" class="popover-image" data-trigger="hover" title="test image">
      </div>
   </div>
   <div class = "col-sm-4">
     <div class = "caption">
         <p>Some sample text. Some sample text.</p>
      </div>
      <div class = "thumbnail">
         <img src="http://placehold.it/350x150" class="popover-image" data-trigger="hover" title="test image">
      </div>
   </div>
   <div class = "col-sm-4">
     <div class = "caption">
         <p>Some sample text. Some sample text.</p>
      </div>
      <div class = "thumbnail">
         <img src="http://placehold.it/350x150" class="popover-image" data-trigger="hover" title="test image">
      </div>
   </div>
  </div>
  
</div>
</body>
</html>

Edit With Bootstrap 4

$(document).ready(function(){
    $('[data-toggle="popover"]').popover(); 
    $('.popover-image').popover({
    html: true,
    trigger: 'hover',
    placement: 'bottom',
    constraints: [{
        to: 'scrollParent',
        attachment: 'together',
        pin: true
    }],
    title: $(this).data('title'),
    container: 'body',
    content: function(){return '<img src="'+$(this).attr('src') + '" class="img-fluid" />';}
});
});

<!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/4.0.0-alpha.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/css/tether-theme-arrows-dark.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
  
  <style>
  .popover{
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
   }
  .img-center {margin:0 auto;}
</style>
</head>
<body>

<div class="container">
  <div class="row">
    <div class = "col-4">
    <div class="card">
      <div class="card-block">
        <p class="card-text">Some quick example .</p>
      </div>
      <img class="card-img-top popover-image" src="http://placehold.it/350x150" alt="Card image cap" title="test image">
      </div>
    </div>
    <div class = "col-4">
    <div class="card">
      <div class="card-block">
        <p class="card-text">Some quick example .</p>
      </div>
      <img class="card-img-top popover-image" src="http://placehold.it/350x150" alt="Card image cap" title="test image">
      </div>
    </div>
    <div class = "col-4">
    <div class="card">
      <div class="card-block">
        <p class="card-text">Some quick example .</p>
      </div>
      <img class="card-img-top popover-image" src="http://placehold.it/350x150" alt="Card image cap" title="test image">
      </div>
    </div>
  </div>
    <div class="row">
    <div class = "col-4">
    <div class="card">
      <div class="card-block">
        <p class="card-text">Some quick example .</p>
      </div>
      <img class="card-img-top popover-image" src="http://placehold.it/350x150" alt="Card image cap" title="test image">
      </div>
    </div>
    <div class = "col-4">
    <div class="card">
      <div class="card-block">
        <p class="card-text">Some quick example .</p>
      </div>
      <img class="card-img-top popover-image" src="http://placehold.it/350x150" alt="Card image cap" title="test image">
      </div>
    </div>
    <div class = "col-4">
    <div class="card">
      <div class="card-block">
        <p class="card-text">Some quick example .</p>
      </div>
      <img class="card-img-top popover-image" src="http://placehold.it/350x150" alt="Card image cap" title="test image">
      </div>
    </div>
  </div>

</div>
  </body>
</html>

How to change popover arrow when target element is not in center?

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in CSS

Related Questions in TWITTER-BOOTSTRAP

Related Questions in BOOTSTRAP-4

Related Questions in TETHER

Trending Questions

Popular # Hahtags

Popular Questions