Code Monkey home page Code Monkey logo

Comments (10)

atomiks avatar atomiks commented on June 6, 2024

The key issue is the clipping algorithm has a bias toward top/left over bottom/right when both sides are clipped (in this case, the root boundary/viewport and element boundary).

  • Top screenshot: bottom gets clipped by the root viewport in order to respect the element boundary (biased to top)
  • Bottom screenshot: bottom overflows boundary in order to respect the root boundary (again, biased to top)

So in this case, you want the bias not to be toward a side but rather the element boundary, right?

from floating-ui.

VojtechVidra avatar VojtechVidra commented on June 6, 2024

I think you got it right. I would expect that boundary would take precedence over rootBoundary. Yes the rootBoundary should shift the tooltip but only to the edge of the boundary.

from floating-ui.

VojtechVidra avatar VojtechVidra commented on June 6, 2024

Do you think this behavior can be achieved with current version of Floating UI?

from floating-ui.

atomiks avatar atomiks commented on June 6, 2024

Not straightforwardly, it would require custom middleware instead of shift, and using detectOverflow most likely.

from floating-ui.

VojtechVidra avatar VojtechVidra commented on June 6, 2024

It would be great to have this feature, however it's not super ciritcal for me. So feel free to close this issue 🙂

Thanks for the clarification 🙂

from floating-ui.

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.