In the snippet below, the tooltip of a document is partially cropped (you may need to resize the window to see it), as if I had overflow-x: hidden, and although I have overflow-x: visible it creates a scroll on x.
I want the tooltip to be fully visible without the need to scroll on x, while style being able to scroll on y.
Notes :
1 - there are similar questions but no true answer.
2 - You can see this JsFiddle instead of the snippet.
<link href="https://cdn.jsdelivr.net/npm/bulma-tooltip@3.0.2/dist/css/bulma-tooltip.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bulma@0.8.2/css/bulma.min.css" rel="stylesheet"/>
<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>