7771


サンプルコード

[code]

    <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>
    
[/code]

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

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


CC BY-SA 3.0
2015-03-11T06:22:20.953
7766
2015-03-11T06:50:17.333
8307
question
javascript html css
overflow:scrollで内包されている要素の中のツールチップの実装がしたい


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


CC BY-SA 3.0
2015-03-11T06:26:46.653
7767
2015-03-11T06:26:46.653
525
7766
answer


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

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

[code]

    $(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();
        });
        
    });
[/code]

[code]

    <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>
[/code]


CC BY-SA 3.0
2015-03-11T06:50:17.333
7771
2015-03-11T06:50:17.333
7214
7766
answer