<button id="test-button">This is a custom button</button>


<div id="test-button-tooltip" class="popover fade in bottom-end tooltip-popover hidden" data-popper-reference-hidden="false"
    data-popper-escaped="false" data-popper-placement="bottom-end" data-popper-interactive="false"
    style="z-index: 2002; display: block; position: absolute; inset: auto auto -60px auto;">
    <div class="custom-scroll " style="height: 100%;">
        <div class="outer-container" style="height: 100%;">
            <div class="inner-container" style="margin-right: -20px; height: 100%;">
                <div class="content-wrapper" style="margin-right: 20px; height: 100%; overflow-y: visible;">
                    <div class="popover-inner">
                        <div class="typography typography-font-weight-standard typography-font-size-s popover-content">
                            <div class="form_field_tooltip__content">
                                <div>This is some custom tooltip</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div data-placement="bottom-end" class="arrow" data-popper-arrow="true" style="position: absolute;">
    </div>
</div>

<script>
  let tooltip = document.querySelector("#test-button-tooltip")
  let button = document.querySelector("#test-button")

  button.addEventListener('mouseenter', () => tooltip.classList.toggle('hidden'))
  button.addEventListener('mouseleave', () => tooltip.classList.toggle('hidden'))
</script>