Tooltips showing on elements outside of viewport

[xdesai]

I have a scenario where I need to show a lot of tooltips simultaneously which I control through a v-model. However, some of these elements are out of the current viewport further down the page - when I set the model, all the tooltips for those elements pop up at the bottom of the screen - is there any way to hide those ones until their elements come into view?

I tried using an intersection component, but that didn’t work.

Here is a codepen to simulate what I mean:
https://codepen.io/xariusdesai/pen/abBzrwq?editors=101

I’ve put a dummy div with a height of 900px to hide the element, but the tooltip is still showing.

Any ideas?

Cheers,
Xarius

[beets]

@xdesai The Quasar position engine just works that way where it bounds it to the viewport. I think you had the right idea to use an intersection observer. What I would do is make the toggle set a value shouldShow to true, and then when the intersection observer fires, check if it showing and shouldShow, and toggle the tooltip. Same when the intersection observer fires to hide, then hide the tooltip. Managing state for each element is a bit tricky, but you could even make a component wrapper that handles this.

[xdesai]

@beets Ah, thats not going to work (neither will intersection observer now that I’ve played around a bit more) - the reason I wanted to show all the tooltips is because this is a layout for a printed report - using an intersection hides everything not in view!

I think I’m going to have to manually recreate the divs and use css to manually place them for the printed version.

[beets]

@xdesai I think it can still work, instead of conditionally showing the tooltip, conditionally apply a content-class="hide-me" to the tooltip. Then with css:

@media screen {
  .hide-me { display: none }
}

Edit: actually quasar has a css class to help here: print-only. So basically with the intersection observer, when the element is out of the viewport, add print-only. When it goes back into the viewport, remove the print-only class.

[xdesai]

@beets Won’t that mean I have to manually move over each page and print? My report has multiple pages - I just want to load the page and immediately fire the print command.

[beets]

@xdesai here’s what I was trying to explain: https://bncr9.sse.codesandbox.io/ (source: https://codesandbox.io/s/boring-tereshkova-bncr9 )

However I do notice that the tooltips aren’t exactly aligned on the print preview though. This is likely just due to the absolute positioning. So instead maybe you can show an inline div with the print-only class.

[xdesai]

@beets I ended up just creating a conditional div and used css positioning. Thanks for the help though!