I'm making a WordPress website where I use a tooltip to show when a user hovers over an icon. Now on mobile, I want the hover function to be done with a clicked function so I created a jQuery to handle it. I'm new to jQuery so that is probably the issue, or I'm doing it wrong and I can do it in another way. The issue is now that wont all the the tooltip-text be active no one someone clicks one tooltip icon? 

It works with CSS to just use `display: block/none` but I want the click function to work too. And then style it with `opacity` and `transition`

```js
$(function() {
  $('.tooltip').clicked(function() {
    $('.tooltiptext').addClass("tooltip-clicked");
  })
})
```

```css
.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip:hover .tooltiptext {
  display: block;
  visibility: visible;
  opacity: 1;
}

.tooltip-text {
  display: none;
  visibility: hidden;
}

.tooltip-clicked {
  display: block;
  visibility: visible;
  opacity: 1;
}
```

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<i class="tooltip">
  <p class="tooltip-text">lorem ipsum...</p>
</i>
```