react-component / react-component/tooltip
Tooltip is squished when in horizontally scrolling page
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 944
- Forks
- 199
- Avg merge
- 19h 1m
- Merged PRs (30d)
- 3
Description
In our application we have a very long horizontally scrolling page (week scheduler). Any tooltips that appear after scrolling to the right are squished. Replication:
Go go the example http://react-component.github.io/tooltip/examples/placement.html
In your browser's debugging tools change one of the tooltips to be longer so the squishing is more obvious.
Add this CSS
.example {
margin-left: 110vw;
}
You can see that once the content is off the screen to the right the tooltip is only as wide as the longest word.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the placement example at http://react-component.github.io/tooltip/examples/placement.html and reproduce the issue by adding margin-left: 110vw to .example, then inspect the tooltip positioning behavior in the browser. The work is done when a longer tooltip keeps its intended width after the content is scrolled off the screen to the right.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100