double click on tooltip required

Chrome on touch devices requires double click

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<body>

    <span class="infoSectionTooltip" title="Here is a tooltip"></span>

</body>

CSS

.infoSectionTooltip {
    width: 60px;
    height: 60px;
    background-color: rebeccapurple;
    float: left;
}

JavaScript

$(document).ready(function () {

            $('.infoSectionTooltip').tooltip({
                position: { my: "center top+10" },
                show: { effect: "fadeIn", duration: 100 },
                hide: { effect: "fadeOut", duration: 0 },
                tooltipClass: "tooltipClass",
            });

            $('.infoSectionTooltip').click(function () {
                if ($(".tooltipClass")[0]) {
                    $(".infoSectionTooltip").tooltip("close");
                } else {
                    $(this).closest(".infoSectionTooltip").tooltip("open");
                }
            });
        });