0

正しく配置できないブートストラップ ツールチップを使用した次のページがあります。このページには次の特徴があります。

  • #outer-containerは私のページです。固定幅です。
  • 多くあります.inner-container。固定幅とoverflow-x: auto.
  • .inner-containers動的に生成されます。(関連性があるかどうかわからないので、次のサンプル コードは静的です)
  • div内には、多くのタグ.inner-containerを含めることができる任意の 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ページ全体にも 1 つ生成されるためです。ツールチップをスクロールしようとするとすぐにフェードアウトするため、ツールチップを表示できなくなりました。

非常に長い画像: ページとスクロールバーの外にあるツールチップ

今問題は.....

ブートストラップのツールチップを構成したり、css でスタイルを設定して、「実際の」が隠れたエッジではなく、2 番目の画像のようにトリミングされた画像の端に常に表示されるようにする方法はありますか? また、画像がツールチップよりも短い場合.inner-container、コンテナーの右端ではなく、画像の横に表示する必要があります。

4

2 に答える 2

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 に答える