CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
user2622344
user2622344

Reputation: 1096

UI-Bootstrap - Popover/Tooltip for mobile display

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).

Upvotes: 0

Views: 2154

Answers (3)

Mark
Mark

Reputation: 1680

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.

Upvotes: 0

npn
npn

Reputation: 113

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

Upvotes: 1

Rob J
Rob J

Reputation: 6629

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'

Upvotes: 0

Related Questions