0

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

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

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

$("#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还会在整个页面上生成滚动条。现在无法看到工具提示，因为一旦您尝试滚动工具提示就会消失。

真长图：页面外的工具提示和滚动条

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

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

4

2 回答 2

0 
#outer-container .tooltip { left: calc(50% + 480px)!important; }
于 2015-05-25T21:58:11.047 回答
0

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

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

于 2015-05-27T23:04:36.943 回答