2

サンプルコード

<div class="layer1" style="overflow:scroll;">
<ul>
    <li class="layer2" style="position:relative;">
        <button>btn</button>
        <p class="tooltip" style="display:none;position:absolute;"></p>
    </li>
    <li class="layer2" style="position:relative;">
        <button>btn</button>
        <p class="tooltip" style="display:none;position:absolute;"></p>
    </li>
</ul>

例えばこんな形で、スクロール範囲内の要素の中のそれぞれのリストに対して、
JavaScriptでbuttonのclickイベントをきっかけに
position:absoluteのブロックを表示させるUIを作りたいのですが
このままやると、当然ですがoverflow:scrollを指定しているdiv要素の中で見切れてしまうのです。

ツールチップUIがoverflow:scrollを指定しているdiv要素より上のレイヤーに表示されている見た目にするためには、どのような実装方法がありますでしょうか?
何卒よろしくお願いいたします。

2 件の回答 2

2

layer1内のものはどうにもできません。z-indexしたとしても結局はlayer1内なので。
そもそもそれができてしまうとoverflow指定の存在意義がないというか・・・

実装方法の一例を示します。layer1とは別のdiv要素に表示させます。
こんな感じです。

$(document).ready(function(){
    
    $('button').on('click', function(e){
        var str = $(this).parent().find('.tooltip').html();
        var offset = $(this).offset();
        $('#target').html(str).css({
            'display' : 'block',
            'position' : 'absolute',
            'top' : offset.top + 20,
            'left' : offset.left + 20
        }).fadeIn();
    }).on('mouseleave', function(e){
        $('#target').fadeOut();
    });
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<div class="layer1" style="overflow:scroll; width:150px; height:200px;">
<ul style="line-height: 2.5em;">
    <li class="layer2">
        <button>ボタン1</button>
        <p class="tooltip" style="display:none;">ボタン1のツールチップ</p>
    </li>
    <li class="layer2">
        <button>ボタン2</button>
        <p class="tooltip" style="display:none;">ボタン2のツールチップ</p>
    </li>
</ul>
</div>
<div id="target" style="display: none;"></div>

1
  • 大変丁寧なご回答ありがとうございます! こちらの実装方法を参考に、やってみたいとおもいます!助かりました! Commented 2015年3月11日 6:59
0

jquery-uiのtooltipとかを使えば簡単に出来ると思います。
手作りしたいのであれば追加する時にlayer1の子要素としてではなく、bodyに直接追加して位置を指定すればいいと思います、

2
  • 迅速なご回答、ありがとうございます! やはり、jsでクリックされた位置でbodyに表示、というのが妥当ですよね。。 このソースコードのままのCSSのみの実装は難しいでしょうか…? Commented 2015年3月11日 6:35
  • js側のソースがないので何とも言えませんが、layer1の中に入っていたらcssだけ弄っても無駄かと。 Commented 2015年3月11日 6:38

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。