Overflow Bulma tooltip

by Flyout

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bulma-tooltip.min.css">
<div class="columns" style="height: 370px">

  <div class="column is-one-third">
    <nav class="panel position-relative w-100 h-100">
    
      <div class="panel-heading">
        <p>Documents</p>
      </div>
      
       <div class="panel-block is-block" style="height: 140px; overflow-x: visible; overflow-y: scroll">
         <a class="panel-block is-block">
           <span data-tooltip="This is the document number 1" class="has-tooltip-right">Document 1</span>
         </a>
         <a class="panel-block is-block">
           <span data-tooltip="This is the document number 2" class="has-tooltip-right">Document 2</span>
         </a>
         <a class="panel-block is-block">
           <span data-tooltip="This is the document number 3" class="has-tooltip-right">Document 3</span>
         </a>
         <a class="panel-block is-block">
           <span data-tooltip="This is the document number 4" class="has-tooltip-right">Document 4</span>
         </a>
         <a class="panel-block is-block">
           <span data-tooltip="This is the document number 5" class="has-tooltip-right">Document 5</span>
         </a>
       </div>
       
       <div class="panel-block is-block position-absolute fixed-bottom border-top">
         <input type="file">
       </div>
    </nav>
  </div>
  
  <div class="column is-two-thirds h-100">
    PDF viewer
  </div>
</div>