如何在部分隐藏的图像旁边正确定位 bootstrap 工具提示

Question

我有以下页面使用 bootstrap 工具提示，但我无法正确定位该页面具有以下特点：

#outer-container 是我的页面。它具有固定宽度。
有很多.inner-container。它们具有固定宽度和 overflow-x: auto.
.inner-containers是动态生成的。（不确定是否相关，所以下面的示例代码是静态的）
在 .inner-container div 中有任意 HTML 可以包含许多 <img> 标签
每个 <img> 都有一个工具提示，其 alt 文本作为标题。
图片可以比 .inner-container div

这是代码片段，当运行整页的代码片段时，您可以看到问题。

$("#outer-container").tooltip({
   selector: "img",
   placement: "right",
   title: function () { return $(this).attr("alt"); },
 });

#outer-container
{
  border: 1px solid;
  padding: 10px;
  width: 960px;
  margin-left: auto;
  margin-right: auto;
  overflow: auto;
}

.inner-container
{
  width: 600px;
  overflow-x: auto;
  border: 1px solid;
  margin-bottom : 10px;
  float: right;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<div id="outer-container">
  <div class="inner-container">
    <figure>
      <img src="http://i.imgur.com/mrXWW8S.png" alt="Man ALL IS LOŚ͖̩͇̗̪̏̈́T ALL IS LOST the pon̷y he comes he c̶̮omes he comes the ichor permeates all MY FACE MY FACE ᵒh god no NO NOO̼OO NΘ stop the an*̶͑̾̾̅ͫ͏̙̤g͇̫͛͆̾ͫ̑͆l͖͉̗̩̳̟̍ͫͥͨe̠̅s ͎a̧͈͖r̽̾̈́͒͑e not rè̑ͧ̌aͨl̘̝̙̃ͤ͂̾̆ ZA̡͊͠͝LGΌ ISͮ̂҉̯͈͕̹̘̱ TO͇̹̺ͅƝ̴ȳ̳ TH̘Ë͖́̉ ͠P̯͍̭O̚N̐Y̡ H̸̡̪̯ͨ͊̽̅̾̎Ȩ̬̩̾͛ͪ̈́̀́͘ ̶̧̨̱̹̭̯ͧ̾ͬC̷̙̲̝͖ͭ̏ͥͮ͟Oͮ͏̮̪̝͍M̲̖͊̒ͪͩͬ̚̚͜Ȇ̴̟̟͙̞ͩ͌͝S̨̥̫͎̭ͯ̿̔̀ͅ" />
      <figcaption>
        Image originally posted by <a href="http://meta.stackexchange.com/questions/213769/work-is-hard-lets-color-the-walls/213975#213975">Travis J</a>
      </figcaption>
    </figure>
  </div>
  
  <div class="inner-container">
    <figure>
      <img src="http://i.stack.imgur.com/CThCe.png" alt="Sanely-sized Whosebug logo" />
      <figcaption>Sanely-sized Whosebug logo</figcaption>
    </figure>
  </div>
  
  <div class="inner-container">
    <figure>
      <img src="http://i.stack.imgur.com/MvHsz.jpg" alt="Insanely-long-sized Whosebug logo" />
      <figcaption>Insanely-long-sized Whosebug logo</figcaption>
    </figure>
  </div>
</div>

上面的代码可以很好地显示工具提示，但有一个小问题。工具提示不会立即出现在截断图像之后，而是出现在图像隐藏部分结束的位置之后，因此它看起来离图像太远。

当您向右滚动 .inner-container 时，工具提示会越来越靠近 img，直到它紧挨着它。

当图像比整个屏幕更宽时，情况会变得更糟，因为现在工具提示太靠右了，现在它不仅在 .inner-container 中生成预期的滚动条，而且在整个屏幕上生成一个页。现在无法看到工具提示，因为一旦您尝试滚动工具提示就会消失。

现在的问题是......

是否有任何方法可以配置 bootstrap 工具提示或使用 css 设置样式以使其始终出现在裁剪图像的边缘，如第二张图像所示相对于 "actual" 但隐藏的优势？。此外，当图像短于 .inner-container 时，工具提示应出现在图像旁边而不是容器的右边缘

Answer 1

#outer-container .tooltip { left: calc(50% + 480px)!important; }

Answer 2

感谢@y34h 的想法，但我必须通过覆盖实际的 bootstrap js 代码来计算 left 属性的正确值。

这里是新的Tooltip.getCalcultedOffset，它是计算工具提示的绝对位置的函数：

    $.fn.tooltip.Constructor.prototype.getCalculatedOffset = function (placement, pos, actualWidth, actualHeight) {
    return placement === 'bottom' ? {
            top: pos.top + pos.height,
            left: pos.left + pos.width / 2 - actualWidth / 2 } :
        placement === 'top' ? {
            top: pos.top - actualHeight,
            left: pos.left + pos.width / 2 - actualWidth / 2 } :
        placement === 'left' ? {
            top: pos.top + pos.height / 2 - actualHeight / 2,
            left: pos.left - actualWidth } :
        /* placement == 'right' */ {
            top: pos.top + pos.height / 2 - actualHeight / 2,
            left:
                /* begin fix */
                Math.min(
                    pos.left + pos.width, //original left
                    $(".inner-container").offset().left + $(".inner-container")[0].clientWidth //max left
                )
                /* end fix */
        };
};

实际变化包含在/* begin fix */和/* end fix */

中

这是完整的工作代码：

$.fn.tooltip.Constructor.prototype.getCalculatedOffset = function (placement, pos, actualWidth, actualHeight) {
        return placement === 'bottom' ? {
                top: pos.top + pos.height,
                left: pos.left + pos.width / 2 - actualWidth / 2 } :
            placement === 'top' ? {
                top: pos.top - actualHeight,
                left: pos.left + pos.width / 2 - actualWidth / 2 } :
            placement === 'left' ? {
                top: pos.top + pos.height / 2 - actualHeight / 2,
                left: pos.left - actualWidth } :
            /* placement == 'right' */ {
                top: pos.top + pos.height / 2 - actualHeight / 2,
                left:
                    /* begin fix */
                    Math.min(
                        pos.left + pos.width, //original left
                        $(".inner-container").offset().left + $(".inner-container")[0].clientWidth //max left
                    )
                    /* end fix */
            };
    };

$("#outer-container").tooltip({
   selector: "img",
   placement: "right",
   title: function () { return $(this).attr("alt"); },
 });

#outer-container
{
  border: 1px solid;
  padding: 10px;
  width: 960px;
  margin-left: auto;
  margin-right: auto;
  overflow: auto;
}

.inner-container
{
  width: 600px;
  overflow-x: auto;
  border: 1px solid;
  margin-bottom : 10px;
  float: right;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<div id="outer-container">
  <div class="inner-container">
    <figure>
      <img src="http://i.imgur.com/mrXWW8S.png" alt="Man ALL IS LOŚ͖̩͇̗̪̏̈́T ALL IS LOST the pon̷y he comes he c̶̮omes he comes the ichor permeates all MY FACE MY FACE ᵒh god no NO NOO̼OO NΘ stop the an*̶͑̾̾̅ͫ͏̙̤g͇̫͛͆̾ͫ̑͆l͖͉̗̩̳̟̍ͫͥͨe̠̅s ͎a̧͈͖r̽̾̈́͒͑e not rè̑ͧ̌aͨl̘̝̙̃ͤ͂̾̆ ZA̡͊͠͝LGΌ ISͮ̂҉̯͈͕̹̘̱ TO͇̹̺ͅƝ̴ȳ̳ TH̘Ë͖́̉ ͠P̯͍̭O̚N̐Y̡ H̸̡̪̯ͨ͊̽̅̾̎Ȩ̬̩̾͛ͪ̈́̀́͘ ̶̧̨̱̹̭̯ͧ̾ͬC̷̙̲̝͖ͭ̏ͥͮ͟Oͮ͏̮̪̝͍M̲̖͊̒ͪͩͬ̚̚͜Ȇ̴̟̟͙̞ͩ͌͝S̨̥̫͎̭ͯ̿̔̀ͅ" />
      <figcaption>
        Image originally posted by <a href="http://meta.stackexchange.com/questions/213769/work-is-hard-lets-color-the-walls/213975#213975">Travis J</a>
      </figcaption>
    </figure>
  </div>
  
  <div class="inner-container">
    <figure>
      <img src="http://i.stack.imgur.com/CThCe.png" alt="Sanely-sized Whosebug logo" />
      <figcaption>Sanely-sized Whosebug logo</figcaption>
    </figure>
  </div>
  
  <div class="inner-container">
    <figure>
      <img src="http://i.stack.imgur.com/MvHsz.jpg" alt="Insanely-long-sized Whosebug logo" />
      <figcaption>Insanely-long-sized Whosebug logo</figcaption>
    </figure>
  </div>
</div>

如何在部分隐藏的图像旁边正确定位 bootstrap 工具提示

How to position bootstrap tooltip correctly next to a partially hidden image

css

twitter-bootstrap-3

overflow

twitter-bootstrap-tooltip