UI-Bootstrap - Popover/Tooltip for mobile display

Question

I have a problem with Bootstrap-UI Tooltip/Popover-directive in mobile displays. If the User clicks a button with a Tooltip, this Popover is shown correctly. But unfortunately this popup will not close if the user clicks somewhere else.

Does everyone had the same problem and found a solution for this?

I use the latest version (0.12.1).

Could you please provide an example? What is your settings for `tooltip-trigger`? — boindiil, Mar 30 '15 at 07:15
This [plunker](http://plnkr.co/edit/NXxO17LTC72JcXrRV7EQ?p=preview) works as expected on my mobile device (Android 5.0.1, Chrome) — boindiil, Mar 30 '15 at 08:28
but this only works with jquery dependency. Is there a solution only with angular? — user2622344, Mar 30 '15 at 09:12
it works for me even without jquery (I have updated the plunker) — boindiil, Mar 30 '15 at 09:19
thank you for the replay. Then I think it is a problem with Safari :/ . Even the updated plunker does not work in safari. — user2622344, Mar 30 '15 at 10:44
yes, for example focus doesn't work. The demands for this project is "mouseenter". So I think I have no other possibility than "mouseenter" even if it doesn't work for safari. — user2622344, Mar 30 '15 at 10:51
You could try some workarounds like this: http://stackoverflow.com/a/23571713/1696578 — boindiil, Mar 30 '15 at 11:02

npn · Answer 1 · 2016-12-30T17:12:24.803

1

Add onclick="void(0)" behavior to some of your background elements which when tapped will get rid of the popovers.

credits: https://github.com/angular-ui/bootstrap/issues/2123

edited Dec 30 '16 at 17:12

answered Dec 30 '16 at 16:43

npn

103
1
12

score 0 · Answer 2 · answered Mar 31 '15 at 14:22

The default triggerMap for the tooltip looks like so:

  var triggerMap = {
    'mouseenter': 'mouseleave',
    'click': 'click',
    'focus': 'blur'
  };

The mouseenter show trigger has a dismiss trigger of mouseleave. You can try creating your own trigger and adding a blur dismiss trigger like so:

'mouseenter': 'mouseleave blur'

score 0 · Answer 3 · answered Jul 20 '20 at 04:00

I've had the most success using CSS to allow iOS to detect the "body" (and any nested element that would bubble down) as a clickable element and therefor trigger a "click" event, like you'd expect on a desktop device.

This media query will target touch devices, and not cause a cursor style change on desktop devices. It solves for both Tooltips and Popovers, including tooltips that use mouseenter or outsideClick.

@media (hover: none), (pointer: coarse) {
    body {
        cursor: pointer;
    }
}

I wasn't having issues in Android on Chrome, but the above will fix it for Mobile iOS on Safari or Chrome.

UI-Bootstrap - Popover/Tooltip for mobile display

3 Answers3