Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Popover over zero-width element is displayed on the top-left corner of the page

See original GitHub issue

Fiddle: https://jsfiddle.net/stepancheg/uuhrfws1/4/ Code:

<div style="background: cyan; height:  100px">Padding</div>

<div
  data-toggle="popover"
  title="Popover title"
  data-content="Amazing content"
  data-trigger="hover"
  data-animation="false"
  data-placement="bottom"
  style="border: solid 5px red">
<!-- Zero height div; hover here -->
</div>

Popover is expected to appear right above this message
when you hover over red border.
But it appears at the top of the page.

Screenshot: 2017-10-25_1438

Hover over red line (border). Actual result: popover appears near the top left of the page. Expected: popover should be near red line.

Bootstrap: 4.0 beta 2 Operating system: macOS Browser: Firefox 56.0 or Chrome 62.0.3202.62.

Issue Analytics

State:
Created 6 years ago
Reactions:1
Comments:5 (5 by maintainers)

Top GitHub Comments

1reaction

mdocommented, Jan 10, 2021

Given where this convo ended off, closing as stale and not a Bootstrap bug.

0reactions

FezVrastacommented, Jan 4, 2018

I don’t think anybody opened an issue for this bug on the repository, I use it to schedule my work

Top Results From Across the Web

popover is showing at top left corner as the width of the div is ...

popover is showing at top left corner as the width of the div is very small like < 2.5 px. Save this question....

Popovers · Bootstrap v5.0

On this page ... Zero-length title and content values will never show a popover. ... Four options are available: top, right, bottom, and...

Positioning Ionic popovers | Damir's Corner

This positions it at the bottom with full width and no curved edges. The !important property is used with top and left properties...

Popover Usage - ServiceNow Developers

The default position is top, in which the popover's top-left corner is ... Top, Popover opens above the triggering element popover opening above...

Popovers - Lightning Design System

Base. With Header; With Footer; With Badge; Scrolling region with max-height. Widths. Small; Medium; Large; Full Width. Nubbins. Left; Right; Top; Bottom.