Popper-core: boundariesElement for non-scrolling header

[gregkopp]

I have a situation that I am not sure how to fix. I have a pages that has a fixed header and footer, and the body, when scrolls, falls under them. If I have a tooltip popped open to the top of an object, if I scroll the page, the tooltip doesn't flip until AFTER the object has scrolled under the header.

Is there a way to dynamically set the margins of the boundariesElement area, so that, when I scroll the body, the height of the header is taken into consideration to enable the flip? You can see an example of this at popper.js.org:

[FezVrasta]

I think you could define a custom padding to preventOverflow:
https://popper.js.org/popper-documentation.html#modifiers..preventOverflow.padding

But this will apply it to all 4 sides.

Alternatively you may set a margin-top equal to your header size to your popper elements, just make sure to apply it only when [data-placement*="top"]

[gregkopp]

Thanks for the reply. Pardon my questions. The design I have is also responsive, where the floating header can change sizes and I would need to dynamically adjust that style. I am looking into if onUpdate() could be something I could use, but I am not really sure how I can update the style of the popper instance to change the margin top. I tried this as a test:

onUpdate: (data: any) => {
        data.instance.reference.style.marginTop = '200px';
      },

The results were less than desirable. It mangled the entire page. :)

[FezVrasta]

You are not supposed to modify the data object in onUpdate, at that point the data has already been used.

If you use media queries you could define the margin and adjust it using the same media query?

[gregkopp]

Unfortunately, my skills in this area are very limited. I will have to seek some help from some colleagues. I was hoping to find a solution within my skill set. CSS is still something that I need to work on. Thanks for taking the time.

[FezVrasta]

If you have a media query that changes the height of the navbar:

.navbar {
  height: 100px;
}
@media (max-width: 1000px) {
  .navbar {
    height: 200px;
  }
}

You can use the same media-query, or at least the same breakpoint, to adjust the tooltips margin:

.navbar {
  height: 100px;
}
.tooltip[data-placement*="top"] {
  margin-top: 100px;
}

@media (max-width: 1000px) {
  .navbar {
    height: 200px;
  }
  .tooltip[data-placement*="top"] {
    margin-top: 200px;
  }
}

[gregkopp]

This put me on the right path. THANK YOU!