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

サンプルコード

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