Disable ToolTips on touch device

[devWithKD]

I would love to know if there is a way to disable tooltip on touch screen devices..
i am using tailwind css with react.
I have already disabled the hover effects using hoverOnlyWhenSupported: true in tailwind.config.js

[gabrieljablonski]

There are a couple ways to achieve this.

The first would be to use a CSS media query to add display: none to the .react-tooltip class (this is the default class for the tooltip). Something like this might work:

@media (hover: none) {
  .react-tooltip {
    display: none;
  }
}

Here I'm using the hover: none media query (which should be fine for what you're asking), but you should read up on other media queries, since there might be one more appropriate for your specifications. For instance, there's also the pointer: coarse query.

---

The other way (less elegant) would be to have your own wrapper component for the tooltip that detects if it's a touch device (plenty of JS solutions you can search for), and return null instead of the tooltip when mobile is detected.

Feel free to add some more details for your use-case, but hopefully one of these two methods works for you.

[devWithKD]

There are a couple ways to achieve this.

The first would be to use a CSS media query to add display: none to the .react-tooltip class (this is the default class for the tooltip). Something like this might work:

@media (hover: none) {
  .react-tooltip {
    display: none;
  }
}

Here I'm using the hover: none media query (which should be fine for what you're asking), but you should read up on other media queries, since there might be one more appropriate for your specifications. For instance, there's also the pointer: coarse query.

The other way (less elegant) would be to have your own wrapper component for the tooltip that detects if it's a touch device (plenty of JS solutions you can search for), and return null instead of the tooltip when mobile is detected.

Feel free to add some more details for your use-case, but hopefully one of these two methods works for you.

Thanks a lot mate.
This solves my problem.
Seems it was quite a simple thing from what you have suggested and I was thinking of some weird work-arounds (just newbi things).

[gabrieljablonski]

A lot of the "simple" stuff often requires some decent experience (or extensive googling) to figure out, so don't beat yourself over it 😛