Open ErinPo opened 7 years ago
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);
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.
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.
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
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
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) { ... }
Even if it involves javascript, no problem...