Tooltip css in mobile

HTML & CSS
1

I noticed that the following code works as expected in desktop PC, but not in mobile devices:

html


<span class="tooltip"><span class="tooltiptext">text visible on mouse over</span>visible text</span>

css


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

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  text-indent: 0px !important;
}

.tooltip .tooltiptext {
  visibility: hidden;
/*   width: 160%; */
  text-align: justify;
  font-size: 80%;
  background-color: white;
  color: black;
  border-radius: var(--rounded);
  padding: 10px;
  position: absolute;
  z-index: 1000;
  bottom: 100%;
  left: 0;
/*   margin-left: -60px; */
  margin-bottom: 3%;
  opacity: 0;
/*   transition: opacity 0.7s; */
  box-shadow: gray -3px 3px 4px;
}


.tooltiptext {
  min-width: 20vw}
  
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 10%;
  margin-left: -5px;
  border-width: 12px;
  border-style: solid;
  border-color: white transparent transparent transparent;
}  

.tooltip .tooltiptext {
 transform:translateY(10%);
 transition:visibility 0.1s, opacity 0.2s linear, transform 0.2s linear;
}
.tooltip:hover .tooltiptext {
 transform:translateY(0%);
}

How fix the mobile problem?
Thank you!

2

Most mobile devices don’t have the concept of mouse over.

1 Like
3

I see… Thank you!
But there is no some workaround to bypass this limitation? I mean, to emulate mouse over?

EDIT

I have seen several js / jquery possible solutions, and one claiming to resolve only with css, but its demo doesn’t work on my android.

EDIT

The simplest workaround is to add :active
i.g. :

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

It works! :smile:

4

It would be better to use the hover media query to deliver the hover effect to only devices that can hover and then use js touch events for devices that don’t have hover.

Otherwise you end up with a hover effect that cant be dismissed unless you click somewhere else.

Note that :active doesn’t apply to a span so not sure how that worked for you unless it was in an anchor. Your original code was working on my iPhone but as I said it cant be dismissed easily.

5 Likes
5

Done! Thank you very much, Paul!

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.