css :hover on a mobile device

There lots of java-scripts to allow an effect such as mouse over on a mobile device (that is without mouse), but there is also a very, very simple solution: to use :active instead of :hover, as in the following example:

@media screen and (max-width: 580px) {
  .tooltip:active .tooltiptext {
  visibility: visible;
  opacity: 1;
}
}

while in desktop screen you can keep

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