Git Product home page Git Product logo

Comments (8)

calebjacob avatar calebjacob commented on August 28, 2024

Hey, thanks for the support!

I've already placed logic inside the plugin to keep the tooltip from going off the screen/window. Of course you might have run into a bug where it wasn't quite working. Is that what you were running into?

from tooltipster.

chonthu avatar chonthu commented on August 28, 2024

Right, currently your logic works good for either horizontal orientation or vertical orientation. It doesn't understand that if the position was set to top and it goes off screen at the top and bottom but there is room left and right to use that before defaulting to the fall back of the top. The logic above calculates that first before doing the fallback. Make sense?

This happens to me currently when the tooltip holds a large content area and its to big to fit either horizontally or vertically.

from tooltipster.

calebjacob avatar calebjacob commented on August 28, 2024

Ah, fair point! I'll definitely look into this. Thanks!

from tooltipster.

camilonova avatar camilonova commented on August 28, 2024

@iamceege any updates?

from tooltipster.

louisameline avatar louisameline commented on August 28, 2024

@chonthu : I am not sure I fully understand what you want to do and the extent of consequences, more comments in your code would be appreciated. And if you do any coding, please do so on top of the dev branch of the project.

I'm thinking about an approach where we'd compute the area available at top, bottom, left and right. If none of them were big enough to contain the tooltip, we'd do some computing to find the one which would display the biggest area. What do you think ?

from tooltipster.

chonthu avatar chonthu commented on August 28, 2024

First of all great job on the dev branch just checked it out. Your logic would mostly work. Except your missing 3 scenarios.

  1. Please make sure for position when calculating that you allow strict-left and strict-right. In some cases I don't want fallback position based on the sides. Top and bottom don't need this because even if its offscreen, users can just scroll up or down to see it.

  2. Second case is when (technically) none of the sides work, in this case, based on the position I would forget calculating space around the element and just place so that it doesn't go offscreen.

  3. Third case has to do with your element calculation, currently when calculating space to the right, you look at the tooltip placment aligned to the center of the element. This will only work if the tooltip is less in height than of the element. The case where this is important when your element is either close to the top or bottom of the screen.

from tooltipster.

louisameline avatar louisameline commented on August 28, 2024

Thank you, glad you appreciate :)

Thanks for your clear explanations also, it all makes sense.

About letting tooltips overflow at the top or bottom of the page, it depends. I happen to work on applications where nothing should go offscreen, not even tooltips. It means that maybe a "windowOverflow = false" options should exist to automatically set a maxHeight and maxWidth... But maybe this is too much of an edge case.

None of this is going to be straightforward. When I have some time (not sure when), I'll make a theoritical proposal here before anything else and ask for feedback.

from tooltipster.

louisameline avatar louisameline commented on August 28, 2024

Hello, Tooltipster v4 is out and I hope I solved positioning issues. I didn't detail my logic here before implementing as I said I would, sorry, it was almost simpler to do than to explain lol. You're welcome to try it and open a new issue if you find one, we'll start a fresh conversation based on the current behavior. Thank you!

What's new: #565
Migration guide from v3 to v4: #566

from tooltipster.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.