MenuItem tooltip not positioning correctly on horizontally scrolling page

[TechnicallyTrue]

Hello all,
I've got a page that, on certain screen widths, requires horizontal scrolling. Towards one end of the page, I've got a dropdown with primeng MenuItem objects, set to display a tooltip. Trouble is, if the dropdown is off the screen by default, and the user scrolls to the right, the tooltip appears where the edge of the screen would be without scrolling (i.e. it appears a bit further to the left, hovering over nothing in particular). This happens regardless of what the appendTo or positionStyle property of the tooltip is set to.

html snippet:

Code: Select all

<dropdown #dropdownMenu [options]="dropdownOptions"></dropdown>

typescript snippet:

Code: Select all

@ViewChild('dropdownMenu') dropdown: DropdownComponent;
dropdownOptions: MenuItem<Thing>[];

/* Bunch of other code */

this.dropdownOptions = [
  {
    label: "Item the first",
    command: (thing: Thing) => this.doThingWithThing(thing),
    tooltipOptions: {
      tooltipLabel: "This is the first item in the list",
      appendTo: "dropdownMenu", // also tried with this.dropdown, same result
      positionStyle: "relative",
      tooltipPosition: "left"
  },
  {
    label: "Item the second",
    command: (thing: Thing) => this.doOtherThingWithThing(thing),
    tooltipOptions: {
      tooltipLabel: "This is the second item in the list",
      appendTo: "dropdownMenu",
      positionStyle: "relative",
      tooltipPosition: "left"
  },
  // and so on
]

What should I be doing to get the tooltip to appear attached to the dropdown and not hovering off of where the edge of the screen would be if the user hadn't scrolled?
Thanks!