Skip to content

Handle tooltip use-case directly #5

Open
@Macil

Description

One use-case of react-float-anchor is to show a tooltip over another element. Some tooltip designs include an arrow from the tooltip to the original element. In order to place the arrow, you need to know how the tooltip was placed relative to the element. ReactFloatAnchor didn't provide a way to handle this at all before version 3.3.0.

In version 3.3.0, you can now pass a callback as the float prop which will receive the return value of contain-by-screen, which contains information (the "Choice" value) about how the float prop was positioned.

One problem with this is that contain-by-screen isn't called until after the initial render, so the initial render has to pass null to the float callback as the choice value, and then immediately re-render with the choice from contain-by-screen. (ReactFloatAnchor is smart enough to only do this immediate re-render when the user has passed a callback as the float prop, so users not using the feature aren't affected.)

This could be solved by having a separate "tooltip" prop which may be a function that takes a choice and returns a React node, and making it so this tooltip is only rendered after the float has been positioned.

It's also possible to make ReactFloatAnchor support positioning the tooltip itself, rather than just exposing the choice value from contain-by-screen and expecting the user to position the tooltip using that.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions