Hiding leaflet tooltip on mobile device?

Question

I would only display a tooltip on a device without a touchscreen. A popup and a tooltip will be displayed on your mobile by clicking on the point. I would like to see only popup

 var ubytovaci = L.geoJSON(null, {
    onEachFeature:  forEachFeature2,

    pointToLayer: function (feature, latlng) {
        return L.marker(latlng, {icon: iubyt}).bindTooltip(feature.properties.name);
    },
    filter: function (feature, layer) {
        return (feature.properties.category == "6");
    },
});

Answer 1

In my application, I have a tooltip with minimal information which should be displayed on hover and a popup with a superset of the tooltip information and some interaction elements which should be shown on click/touch.

So the best way would be to modify the event handler for the point, such that it does not open the tooltip if the user touches it (as opposed to hovers or clicks) and the popup should be displayed. This would be in line with the fact thaat you do not know a priori whether the user is going to use touch or mouse or keyboard input, on any device.

However, I was too lazy to get knee deep into the Leaflet event handling. For our use case, the following CSS made everyone happy, as it covers all the cases.

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

So, if the device has no input which can hover (i.e., mouse), it will just hide away any tooltips. If there is such an input available, but the user does not use the mouse, then still everything is fine.

Answer 2

If I understand your question correctly, you want different behaviour on devices with touchscreen capabilities: no tooltip shown on such devices.

WRONG ANSWER: For this you can use touch property of L.Browser namespace. Property L.Browser.touch is set to true for touchscreen devices.

Your code could be something like:

...
pointToLayer: function (feature, latlng) {
  var marker = L.marker(latlng, {icon: iubyt});
  if (L.Browser.touch)
    return marker;
  else
    return marker.bindTooltip(feature.properties.name);
...

EDIT (correct answer): In above answer I was obviously a little bit naïve in my assumptions. @MarcelWaldvogel is right in his comment, L.Browser.touch is set to true in all browsers supporting touch events, which effectively means ALL browsers. As such L.Browser.touch property is practically useless.

To correctly test for device touch capabilities, one of classic JS DOM tests has to be used. Here is one (tested):

function Is_touch_device() {
  return (('ontouchstart' in window)
       || (navigator.MaxTouchPoints > 0)
       || (navigator.msMaxTouchPoints > 0));    
}