Первое нажатие открывает подсказку; Второе нажатие переходит по ссылке - PullRequest
Новая
       15

Первое нажатие открывает подсказку; Второе нажатие переходит по ссылке

0 голосов
/ 19 марта 2019

У меня есть несколько строчек на странице, которые идут на разные уроки игры на гитаре.На рабочем столе пользователь наводит курсор на название урока, а во всплывающей подсказке отображаются подробности урокаЕсли они заинтересованы, они нажимают на ссылку.Я хочу подобную функциональность на сенсорных экранах: первое прикосновение должно показать подсказку;второе касание (в той же строке) должно вызвать ссылку.Есть ли способ сделать это?Или, может быть, сделать двойное нажатие, чтобы вызвать ссылку?Вот ручка на образце: 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>
...