Primefaces: hide tooltip after scrolling on mobile devices

I have following implementation of tooltip in my xhtml

        <p:column id="application-column--state" width="8%" style="min-width:auto"
                  headerText="#{msg['page.employee-applications.table.col.state']}">
            <ui:repeat value="#{applicationEntry.statesList}" var="stateEntry">
                <h:outputText id="confiurationDocumentForProgramTooltip" escape="false"
                              styleClass="#{stateEntry.styleClass} -margin-right-5 -inline-flex"/>
                <p:tooltip id="confiurationDocumentForProgramTooltipText" escape="false"
                           for="confiurationDocumentForProgramTooltip" showDelay="0"
                           value="#{msg[stateEntry.key]}" trackMouse="false"/>
            </ui:repeat>
        </p:column>

And i have problem with hiding this tooltip on mobile devices during scrolling. This situation can be observed on tooltip showcase https://www.primefaces.org/showcase/ui/overlay/tooltip/tooltipOptions.xhtml?jfwid=984b1 on mobile view in developers tools on Chrome.

I tried to avoid this situation with js:

$(document).ready(function (){
  hideTooltipAfterScroll()
});

function hideTooltipAfterScroll() {
  $("#scrollbar_container").add(window).scroll(function () {
    $( ".ui-tooltip:visible" ).css({
      "z-index" : "",
      "display" : "none"
    });
  })
}

now tooltip is gone after 'touch' scroll, but I cannot reopen closed tooltip. Do You have any ideas how to achieve closing on scrolling with posibility to reopen closed tooltip?