overflow:scrollで内包されている要素の中のツールチップの実装がしたい

サンプルコード

lang
1<div class="layer1" style="overflow:scroll;">
2    <ul>
3        <li class="layer2" style="position:relative;">
4            <button>btn</button>
5            <p class="tooltip" style="display:none;position:absolute;"></p>
6        </li>
7        <li class="layer2" style="position:relative;">
8            <button>btn</button>
9            <p class="tooltip" style="display:none;position:absolute;"></p>
10        </li>
11    </ul>
12</div>

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

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

行動規範の内容に同意します

回答2件

ベストアンサー

具体的にはこんな感じですかね。
yunnさんの書かれているやり方と同じだと思います。

lang
1<!DOCTYPE html>
2<html>
3<head>
4<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
5  <meta charset="utf-8">
6  <title></title>
7  <style>
8    /* デフォルトスタイルのリセット */
9    body{
10     margin:0;
11    }
12    ul{
13      list-style:none;
14      padding:0;
15    }
16    ul,p{
17     margin:0;
18    }
19  </style>
20  <script>
21    $(function(){
22      $("button").click(function(){
23        //tooltipを複製して位置を設定
24        var $clone = $(this).next().clone().css({
25          display: "block",
26          top: $(this).offset().top, //topはボタンと同じ位置
27          left: $(this).offset().left + $(this).outerWidth() + 10 //leftはボタンの右側に配置
28        });
29        //クリックで削除
30        $clone.click(function(){
31          $(this).remove();
32        });
33        //bodyの最後に追加
34        $("body").append($clone);
35      });
36    });
37  </script>
38</head>
39<body>
40<div class="layer1" style="overflow:scroll;">
41    <ul>
42        <li class="layer2">
43            <button>btn</button>
44            <p class="tooltip" style="display:none;position:absolute;">tooltip</p>
45        </li>
46        <li class="layer2">
47            <button>btn</button>
48            <p class="tooltip" style="display:none;position:absolute;">tooltip</p>
49        </li>
50    </ul>
51</div>
52</body>
53</html>