You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When my page loads, before any scrolling, the elements that have titles that are at the top of the page work mostly as expected.
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:
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:
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:
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.
The text was updated successfully, but these errors were encountered:
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.
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:
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:
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:And then placed this at the bottom:
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: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.
The text was updated successfully, but these errors were encountered: