Feature Request: Make breakdown display tooltip render within viewport on large lists (or scroll)
Nobody has claimed this yet.
- Dominant language
- Python
- Stars
- 39.9k
- Forks
- 3.4k
- Avg merge
- 7h 27m
- Merged PRs (30d)
- 222
Description
Feature request
Is your feature request related to a problem?
When an insight has many breakdowns, the tooltip that shows them may bleed outside the viewport with no option to scroll.
This makes it difficult to analyze big cohorts.
Describe the solution you'd like
- Make the tooltip render responsively within the viewport
- Consider adding it as a separate area within the chart, similar to how we render the "legend" as part of the chart component (shown below)
Describe alternatives you've considered
- Look at the table that's rendered when you open the insight if it's a UI insight, or convert to a table for SQL insights
Additional context
From: https://posthoghelp.zendesk.com/agent/tickets/35787 (moved to PostHog: https://us.posthog.com/project/2/support/tickets/37143)
Debug info
Kind: support
Target area: analytics
Report event: http://go/ticketByUUID/60556592-b1a6-41bc-8425-3ca2e7a8daf2
Session: https://us.posthog.com/project/sTMFPsFhdP1Ssg/replay/01988a2e-82f7-76e1-b3c4-37f014b039ea?t=4662
Exceptions: https://us.posthog.com/project/2/error_tracking?filterGroup=%7B%22type%22%3A%22AND%22%2C%22values%22%3A%5B%7B%22type%22%3A%22AND%22%2C%22values%22%3A%5B%7B%22key%22%3A%22%24session_id%22%2C%22value%22%3A%5B%2201988a2e-82f7-76e1-b3c4-37f014b039ea%22%5D%2C%22operator%22%3A%22exact%22%2C%22type%22%3A%22event%22%7D%5D%7D%5D%7D
Location: https://eu.posthog.com/project/67025/dashboard/227985
Persons-on-events mode for project: person_id_override_properties_on_events
Contributor guide
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 by locating the breakdown tooltip and the chart component that renders its legend. Reproduce the large-breakdown case described in the issue, then compare the tooltip and chart behavior against the viewport constraint. Done means the breakdown remains usable within the viewport, either by responsive placement or scrolling.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- analytics, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100