从智能手机中的“悬停”事件更改为“触摸”事件以获取工具提示

Question

我不完全知道如何使工具提示在智能手机或平板电脑等移动设备上运行。使用鼠标，我可以将鼠标悬停在“信息”框中。我尝试使用以下代码解决问题：

.tooltipicon:active + .tooltiptext {
visibility: visible;}

问题在这里，需要永久触摸“信息”框。我想要实现的是，当我触摸移动设备上的图标时，应该会出现工具提示。当我触摸时，它应该会消失。

有什么主意吗？我需要JavaScript吗？我不太擅长...

以下代码：

.tooltips {
    position: relative;
    display: inline;
}

.tooltips .tooltiptext {
    display: inline-flex;
    visibility: hidden;
    width: 300px;
    background-color: #FFFFFF;
    color: #6F6F6F;
    line-height: 24px;
    border-radius: 3px;
    padding: 10px;
    box-shadow: 0px 5px 10px -2px rgba(0,0,0,0.5);
    position: absolute;
    z-index: 10;
    top: 100%;
    left: 0%;
    margin-top: 19px;
}

.tooltipicon {
    display:inline;
    cursor: help
}

.tooltipicon:hover + .tooltiptext {
    visibility: visible;
}

<div class="tooltips">Geeignete Anzahl monatl. Besuche
    <div class="tooltipicon"><b>HOVERHERE</b>
    </div>
    <div class="tooltiptext">Monatliche Besuche stellen eine ungefähre Anzahl von Besuchen dar, für die der Hosting-Plan am besten geeignet ist. Es ist lediglich ein Bezugspunkt und keine Einschränkung.
    </div>
</div>

感谢您的帮助！