サンプルコード
<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要素より上のレイヤーに表示されている見た目にするためには、どのような実装方法がありますでしょうか?
何卒よろしくお願いいたします。