Skip to content

fix: show tooltip during hidden periods for multiple choice questions #4115

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.

Sign up for GitHub

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

Open
SylvainChevalier wants to merge 3 commits into
base: main
Choose a base branch
from
Open

fix: show tooltip during hidden periods for multiple choice questions #4115

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bcc102e
fix: show tooltip with user predictions during hidden periods for mul…
github-actions[bot] Jan 20, 2026
caecb8e
fix: show forecasters count during hidden periods
github-actions[bot] Jan 20, 2026
cb091cb
fix: show tooltip during hidden periods even when tooltipChoices is e…
github-actions[bot] Jan 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 44 additions & 34 deletions front_end/src/app/(main)/questions/[id]/components/multiple_choices_chart_view/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -327,40 +327,50 @@ const MultiChoicesChartView: FC<Props> = ({
</div>
)}

{isTooltipActive && !!tooltipChoices.length && (
<FloatingPortal>
<div
className="pointer-events-none z-[100] rounded bg-gray-0 leading-4 shadow-lg dark:bg-gray-0-dark"
ref={refs.setFloating}
style={floatingStyles}
{...getFloatingProps()}
>
<MCPredictionsTooltip
title={tooltipTitle}
communityPredictions={tooltipChoices}
userPredictions={tooltipUserChoices}
FooterRow={
forecastersCount !== null && forecastersCount !== undefined ? (
<tr className="border-t border-gray-300 dark:border-gray-300-dark">
<th
className="px-3 pb-1 pt-2 text-left text-sm font-normal text-gray-800 dark:text-gray-800-dark"
colSpan={2}
>
{t("activeForecastersLabel")}
</th>
<td
className="pr-5 pt-1 text-right text-sm font-normal tabular-nums text-gray-700 dark:text-gray-700-dark"
colSpan={2}
>
{forecastersCount}
</td>
</tr>
) : null
}
/>
</div>
</FloatingPortal>
)}
{isTooltipActive &&
(tooltipChoices.length > 0 ||
!!tooltipUserChoices?.length ||
!!forecastAvailability?.cpRevealsOn ||
!!forecastAvailability?.isEmpty) && (
<FloatingPortal>
<div
className="pointer-events-none z-[100] rounded bg-gray-0 leading-4 shadow-lg dark:bg-gray-0-dark"
ref={refs.setFloating}
style={floatingStyles}
{...getFloatingProps()}
>
<MCPredictionsTooltip
title={tooltipTitle}
communityPredictions={tooltipChoices}
userPredictions={tooltipUserChoices}
showMeColumn={
!!tooltipUserChoices?.length ||
!!forecastAvailability?.cpRevealsOn ||
!!forecastAvailability?.isEmpty
}
FooterRow={
forecastersCount !== null &&
forecastersCount !== undefined ? (
<tr className="border-t border-gray-300 dark:border-gray-300-dark">
<th
className="px-3 pb-1 pt-2 text-left text-sm font-normal text-gray-800 dark:text-gray-800-dark"
colSpan={2}
>
{t("activeForecastersLabel")}
</th>
<td
className="pr-5 pt-1 text-right text-sm font-normal tabular-nums text-gray-700 dark:text-gray-700-dark"
colSpan={2}
>
{forecastersCount}
</td>
</tr>
) : null
}
/>
</div>
</FloatingPortal>
)}
</div>
);
};
Expand Down
Loading