Dynamic offset calculation so that step text appears always same location

[Featherless-Biped]

Hi all,
I created a function that calculates the offset between the targeted element (step) and another element that I will call fixed. in order to ensure that the tour text appears at the same fixed position on the screen, regardless of the element it's attached to, as the screen size may vary.
This is the code I am using:

function calculateOffet(targetElementClass) {
  console.log("targetElementClass:", targetElementClass);
  console.log("target", document.querySelector(`${targetElementClass}`));
  console.log("logo", document.querySelector(`#askBdivMainContentId`));
  let target = document.querySelector(`${targetElementClass}`);
  let logo = document.querySelector("#askBdivMainContentId");

  let placement = "top-end";
  let targetRect = target.getBoundingClientRect();
  let logoRect = logo.getBoundingClientRect();
  console.log("target", targetRect);
  console.log("logo", logoRect);

  let offsetX = logoRect.x - targetRect.x;
  let offsetY = logoRect.y - targetRect.y;
  tour.getCurrentStep().updateStepOptions({
    popperOptions: {
      placement: placement,
      modifiers: [
        {
          name: "offset",
          options: {
            offset: [offsetX, offsetY],
          },
        },
      ],
    },
  });
  console.log([offsetX, offsetY]);
}

for some reason, the text keeps appearing in different positions (that are slightly different from one another), the function is working and the offset is being updated.

Amazon.com._.shoes.for.boys.-.Google.Chrome.2023-03-11.16-17-39.mp4

[RobbieTheWagner]

@Featherless-Biped I am not sure I understand the use case. From your video, it seems like you want every step to be attached to the image in the top left. For that, you wouldn't need any offset or custom placement.

[Featherless-Biped]

Hi @RobbieTheWagner
I am attaching the highlight to different elements, but the text I want to appear on the top right corner.
giving it a fixed position with CSS is not working, because of different screen sizes. the picture on the text corner is added with css

[RobbieTheWagner]

@Featherless-Biped I think what you want is to omit the on portion of the attachTo this will still cut out the hole to highlight your target, but will just center the tooltip in the middle of the screen. You can then either use offset or custom CSS to move it to the top left.