: )

So, I'm trying to solve a hover effect issue. I have tooltips on some of my links. Code looks like this:

```
<a href="https://wikipedia.org/wiki/Space_Shuttle_Atlantis">
  <h6 class="has-tip">Space Shuttle
    <p class="tip">The space shuttle was invented by Santa Claus</p>
  </h6>
</a>

```

And the CSS is a bit more involved: 

```
.tip {
  display: block;
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  pointer-events: none;
  padding: 20px;
  margin-bottom: 15px;
  color: #fff;
  opacity: 0;
  background: rgba(255,255,255,.8);
  color: coal;
  font-family: 'Ubuntu Light';
  font-size: 1em;
  font-weight: normal;
  text-align: left;
  text-shadow: none;
  border-radius: .2em;
  transform: translateY(10px);
  transition: all .25s ease-out;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

.tip::before {
  content: " ";
  display: block;
  position: absolute;
  bottom: -20px;
  left: 0;
  height: 20px;
  width: 100%;
}

.tip::after { /* the lil triangle */
  content: " ";
  position: absolute;
  bottom: -10px;
  left: 50%;
  height: 0;
  width: 0;
  margin-left: -13px;
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid rgba(255,255,255,.8) 10px;
}

.has-tip:hover .tip {
  opacity 1;
  pointer-events auto;
  transform translateY(0px);
}

```

Now, on desktop this works wonderfully. You hover over the tiny title and you get a pretty looking tooltip, then if you click anywhere on the title or tooltip (unless you decide to put yet another link in the paragraph which works separately and nicely) you activate the link. Yay : )

Now on mobile, the whole thing gets funky. Touching just activates the link. If you have slow internet, or iOS, you might glimpse the tooltip just as the next page loads.

I would like the following behavior:

1. User taps on tiny title (h6) which has class (has-tip)
2. If this is the first tap, the tooltip shows, and nothing else happens. 3)
3. If the tooltip is already showing when they tap (as in a subsequent
tap) then the link is activate and the new page loads.

Any ideas how I might implement this? No jQuery if possible.