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

Question

我有以下页面使用我无法正确定位的引导工具提示该页面具有以下特点:

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

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

$("#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 LOŚ͖̩͇̗̪̏̈́T ALL I​S LOST the pon̷y he comes he c̶̮omes he comes the ich​or permeates all MY FACE MY FACE ᵒh god no NO NOO̼O​O NΘ stop the an​*̶͑̾̾​̅ͫ͏̙̤g͇̫͛͆̾ͫ̑͆l͖͉̗̩̳̟̍ͫͥͨe̠̅s ͎a̧͈͖r̽̾̈́͒͑e n​ot rè̑ͧ̌aͨl̘̝̙̃ͤ͂̾̆ ZA̡͊͠͝LGΌ ISͮ̂҉̯͈͕̹̘̱ TO͇̹̺ͅƝ̴ȳ̳ TH̘Ë͖́̉ ͠P̯͍̭O̚​N̐Y̡ H̸̡̪̯ͨ͊̽̅̾̎Ȩ̬̩̾͛ͪ̈́̀́͘ ̶̧̨̱̹̭̯ͧ̾ͬC̷̙̲̝͖ͭ̏ͥͮ͟Oͮ͏̮̪̝͍M̲̖͊̒ͪͩͬ̚̚͜Ȇ̴̟̟͙̞ͩ͌͝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 stackoverflow logo" />
      <figcaption>Sanely-sized stackoverflow logo</figcaption>
    </figure>
  </div>
  
  <div class="inner-container">
    <figure>
      <img src="http://i.stack.imgur.com/MvHsz.jpg" alt="Insanely-long-sized stackoverflow logo" />
      <figcaption>Insanely-long-sized stackoverflow logo</figcaption>
    </figure>
  </div>
</div>

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

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

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

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

有什么方法可以配置 Bootstrap 工具提示或使用 css 设置样式，使其始终出现在裁剪图像的边缘，如第二张图像，而不是“实际”但隐藏的边缘？此外，当图像短于 .inner-container 时工具提示应该出现在图像旁边，而不是在容器的右边缘

Answer 1

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