Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Target off after scrolling #8

Open
placoderm opened this issue Aug 24, 2024 · 0 comments
Open

Target off after scrolling #8

placoderm opened this issue Aug 24, 2024 · 0 comments

Comments

@placoderm
Copy link

I am trying to implement your title tooltip while making use of this plugin. I am basing it off of this sandbox: https://jsbin.com/safedoq/edit?html,css,js,output

When my page loads, before any scrolling, the elements that have titles that are at the top of the page work mostly as expected.

image

But then when I scroll and hover over the same element, the tool tip appears in the old location, which is now away from the target:

image

To me it seems obvious that it shouldn't be that way, but perhaps some people need it that way.

Note that the problem occurs exactly the same no matter where on the screen the page is loaded. So even if the page loads initially at the very bottom of the page (so that the top of the page is hidden off screen), still only the tooltips at the very top of the screen work (after scrolling back to the top.

I noticed this in your readme:

This scripts places an element next to another element (at a certain prefered relative place). If you want to update the targer's position (relativce to the referece) when the page scrolls or resizes I advice adding observers:

const observerCallback = () => position({ target:targetElement, ref:refElement })

// create observers instances
const resizeObserver = new ResizeObserver(observerCallback)
const intersectionObserver = new IntersectionObserver(observerCallback, {root:document, threshold:1})

// start observing (using the instances created above)
resizeObserver.observe(document.body)
intersectionObserver.observe(targetElement)

I am guessing that this is what I need to do to solve my problem, however I have no idea where to put it.

As I said, I have basically just copied from your demo. I placed this in the <head> element of my html page:

      <script src="https://unpkg.com/@yaireo/title-tooltip@latest"></script>
      <script src="https://unpkg.com/@yaireo/position@latest"></script>

And then placed this at the bottom:

    <script>
        titleTooltip({ 
        onShow: function(reference, popper){
            position.default({ 
            target    : popper, 
            useRaf    : false, 
            ref       : reference, 
            offset    : [0, 8],
            placement : "center below",
            })
        }
    })
    </script>

I have tried putting the code from your readme (with the observerCallback) after this code, but I (unsurprisingly) get the following error in the console:

image

I think your script is exactly what I need and I would greatly appreciate any advice you could offer to get it working. I'd be happy to help modify your readme or test anything you need me to.

Thanks so much for sharing your code! I'm still new to coding so I appreciate your work and your patience.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant