How to close tooltip on second click or click away on mobile

[ErinPo]

Even if it involves javascript, no problem...

[kazzkiq]

There is the data-balloon-visible attribute which lets you programatically show (or hide) tooltips. You could use JavaScript to enable/disable it on click with some approach like that:

function toggleTooltips(event) {
  var elem = event.target;
  var elemAttr = elem.getAttribute('data-balloon-visible');

  // If tooltip visible, hide it
  if(elemAttr && elemAttr !== "") {
    elem.removeAttribute('data-balloon-visible');

  // If tooltip hidden, make it visible
  } else {
    elem.addAttribute('data-balloon-visible');
  }
}

// Then call it on your elements (e.g.: with jQuery)
$('.toggle-tooltip').on('click', toggleTooltips);

[ErinPo]

This would allow for on/off behavior by clicking on the target, but would not hide it by clicking elsewhere to remove the focus, right? This difficulty to remove focus is specific to iOS.

[cthedot]

You could save the current visible balloon and close it when click on any other balloon element. This way at least there would be a single balloon visible at any time. Or simply close any balloon after a timeout of like 5 seconds? Handling a click somewhere else would IMHO be overkill but would be an option too.

[errantmind]

I am also unable to get around this issue in iOS 12.2 in both of the browsers I tested (Chrome and Safari). I am unable to 'click away' and therefore 'close' the balloon. This blocks other onClick events in my webapp, making this a major issue for me.

edit: I got around the issue by putting cursor: pointer to the relevant css

[moeenio]

My solution to make focus lost when clicking outside something with iOS is to put an empty onclick on other elements, even though that's not ideal

[kristofzerbe]

The solution should be to avoid showing Balloon tooltips on touch devices, because there is no HOVER. A simple solution is to wrap the complete CSS in

@media (hover: hover) {
...
}