PostHog / PostHog/posthog

Feature Request: Make breakdown display tooltip render within viewport on large lists (or scroll)

Open
#36,403 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement feature/insights team/product-analytics
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.

Image

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)
Image

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.