Bootstrap 3 popover doesn't work in "responsive" mode

Question

Here is my JSFiddle for full code example.

Notice how you can hover over that orange road glyphicon and it correctly displays my popover? Well, when I shrink the width of the Result section down to the point that the menus stack vertically, and then I hover over the popover, it doesn't render. To me, this means it won't render when a user is viewing my app from a mobile browser.

I tried:

#fieldMode .popover {
    min-width: 300px
}

#fieldMode .popover-title {
    color: rgb(255,102,0);
    background: rgb(176,205,249);
}

#fieldMode .popover-content {
    color: rgb(12,66,144)
}

...but that doesn't seem to work. What's the fix?

Answer 1

On mobile, your a tag is given display: block by the bootstrap styles, causing to to be 100% width. This won't work if you're trying to position the popover to the right of it. Adding display: inline-block will cause it to only take up the space it needs instead of the full screen width. Updated fiddle: https://jsfiddle.net/mgup49hv/1/

#fieldModePopover {
    display: inline-block;    
}