First Tap打开工具提示; 第二次点按链接

Question

我在页面上有一些线路可以用于不同的吉他课程。 在桌面上，用户将鼠标悬停在课程名称上，工具提示会提供课程详细信息。 如果他们感兴趣，他们点击链接。 我想在触摸屏上使用类似的功能：第一次触摸应该显示工具提示; 第二次触摸（在同一行）应该触发链接。 有没有办法做到这一点？ 或者，也许让它双击以触发链接？ 这是样本上的一支笔： https ： //codepen.io/Daverino/pen/NJBYwx

<html>
<style>
.tooltipWrapper {
  position: relative;
  display: block;
  padding: 0px 10px;
}

.toolTipDiv {
  float: none;
  width: 275px;
  margin-left: 20px;
}

.toolTipLink a {
  display: block;
  color: #202020;
  background-color: transparent;
  width: auto;
  /* Moved to tooltipWrapper */
/*   padding: 0px 10px; */
  text-decoration: none;
  font-size: 16px;
  margin-left: 0px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #878787;
  line-height: 17px;
}

.toolTipLink a:hover {
  background-color: #ddd;
  color: #9b0e11;
  /* Would cause the text to move after having
   * moved the padding to tooltipWrapper
  */
/*   padding-left: 10px; */
}

.tooltipWrapper > span {
  z-index: 10;
  display: none;
  padding: 7px 10px;
  bottom: 100%;
  /* adjust as needed 100% is the right edge */
  left: 90%;
  width: 140px;
  line-height: 16px;
  opacity: 0.85;
}

.tooltipWrapper:hover > span {
  display: inline;
  position: absolute;
  color: #eee;
  background: #000;
}
</style>
<body>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

<div class="toolTipDiv">

  <span class="toolTipLink">

<a href="https://stackoverflow.com" target="_blank" class="tooltip">
<div class="tooltipWrapper">Medium amount of text in this line.
  <span>tootip text tootip text tootip text tootip text tootip text tootip text</span>  
</div>
</a>

<a href="https://stackoverflow.com" target="_blank" class="tooltip">
  <div class="tooltipWrapper">This is the text that will be hovered over. Sometimes it may be this long
      <span>Blah blah blah blah blah</span>
  </div>
</a>

<a href="https://stackoverflow.com" target="_blank" class="tooltip">
  <div class="tooltipWrapper">Here is a shorter line of text.
      <span>Blah blah blah blah blah Blah blah blah blah blah Blah blah blah blah blah</span>
  </div>
</a>

<a href="https://stackoverflow.com" target="_blank" class="tooltip">
  <div class="tooltipWrapper">Medium amount of text in this line.
      <span>I want this to also work on touchscreens</span>
  </div>
</a>

</span>
</div>

</body>

</html>