Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[New Feature] Add Multiple direction support for Tooltip #577

Closed
kotAPI opened this issue Nov 23, 2024 · 2 comments
Closed

[New Feature] Add Multiple direction support for Tooltip #577

kotAPI opened this issue Nov 23, 2024 · 2 comments
Labels
enhancement New feature or request good first issue Good for newcomers

Comments

@kotAPI
Copy link
Collaborator

kotAPI commented Nov 23, 2024

🚀 Feature Request


Feature Description

Tooltip should support a prop for placement, to begin with we can add support for

1. Cardinal Directions

top
bottom
left
right

2. Compound Directions

For offsets or alignment toward corners:

top-left / top-start
top-right / top-end
bottom-left / bottom-start
bottom-right / bottom-end
left-top / left-start
left-bottom / left-end
right-top / right-start
right-bottom / right-end
Tip: The "start" and "end" nomenclature pairs well with bidirectional (LTR/RTL) layouts.

Shall we consider something like this?

{
  position: "top",          // Places the tooltip above the target
  alignment: "start",       // Aligns the tooltip to the left
  strategy: "auto",         // Adjusts position based on viewport space
}

Note: We use Floating UI - If I recall correctly, most of these placements are already supported by the library
https://floating-ui.com/docs/tooltip

@decipher-cs
Copy link
Contributor

decipher-cs commented Dec 11, 2024

floating-ui already has a type for it, import { Placement } from '@floating-ui/react';
It's better to use it then manually keeping track of all the positions

minor change added in #417

@kotAPI
Copy link
Collaborator Author

kotAPI commented Dec 12, 2024

#417

agreed!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request good first issue Good for newcomers
Projects
None yet
Development

No branches or pull requests

2 participants