javascript - 当目标元素不在中心时如何更改弹出箭头？

Question

我有以下问题。当 Tether 移动 Popover 使其保持在视口内时，它的箭头仍然在中心。在下图中，弹出框附加到第一张图片（鼠标光标所在的位置），但看起来好像它附加到第二张图片，因为小箭头仍在中心。有没有办法解决这个问题？

这是我的代码

$('.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') + '" />';}
});

score 1 · Accepted Answer

图像上的弹出框，弹出框显示中的图像源

$(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>

使用 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>

javascript - 当目标元素不在中心时如何更改弹出箭头？

1 回答 1

Related

Reference