Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

bug(tooltip): Popover portal does not reset UA border, background, and backdrop when using custom tooltip bodies

Đang mở
  • Có gì không ổn?
#168 1 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

  • #169 của @stybo — đã đóng, không merge

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
20/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
html, react, typescript
Lĩnh vực
design, frontend

Hướng nghiên cứu

Start with packages/charts-core/tooltip-portal.ts and tooltip.ts, where the issue identifies the popover resets and inline tooltip styles. Check how renderTooltipBody is handled and run the relevant chart-core tests, if available. Done when custom tooltip bodies no longer inherit unwanted wrapper card styles and the popover backdrop is hidden; a linked pull request is already open.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

Describe the bug

When using @tanstack/charts with portal and a custom React tooltip body (renderTooltipBody), the outer container element renders an unwanted border, white/canvas background, padding, box shadow, and in some browsers a backdrop.

This happens due to two issues in packages/charts-core:

  1. Missing Popover UA Resets: In tooltip-portal.ts, when element.setAttribute("popover", "manual") is called, modern browsers apply their default User-Agent stylesheet rules for :popover-open (border: 2px solid, background-color: Canvas, padding: 0.25em) and create a ::backdrop pseudo-element. tooltip-portal.ts only sets position: fixed, margin: 0, but does not neutralize border, background, outline, padding, or ::backdrop.
  2. Hardcoded Inline Card Styles on Custom Tooltips: In tooltip.ts (createTooltip), tooltipElement.style has hardcoded inline styles (background: Canvas, border: 1px solid ..., boxShadow: ..., padding: ...). When a consumer provides their own <ChartTooltip /> component via renderTooltipBody, these high-specificity inline styles leak around the custom card, forcing users to use !important CSS overrides.
Minimal Reproduction
import { defineChart, lineY } from "@tanstack/charts";
import { Chart } from "@tanstack/charts/react/tooltip";
import { portal } from "@tanstack/charts/tooltip/portal";
import { tooltip } from "@tanstack/charts/tooltip";

const chart = defineChart({
  marks: [lineY(data, { x: "time", y: "value" })],
  tooltip: {
    portal,
    use: tooltip,
  },
});

export function TelemetryChart() {
  return (
    <Chart
      definition={chart}
      renderTooltipBody={({ points }) => (
        // Custom styled tooltip card
        <div className="rounded-lg border border-zinc-200 bg-zinc-900 p-2 text-white">
          Value: {points[0].yValue}
        </div>
      )}
    />
  );
}
Expected Behavior

When renderTooltipBody is passed, or when portal uses the HTML Popover API:

  1. The outer popover wrapper element (.ts-chart-tooltip) should act as an unstyled positioning anchor without default card borders, canvas backgrounds, or padding.
  2. The popover's ::backdrop should be hidden by default (display: none).
Actual Behavior

The custom tooltip card is wrapped in a container that displays:

  • The browser's native popover border and Canvas background color.
  • TanStack Charts' default card padding, border, and box-shadow inline styles.
Suggested Fix
  1. In tooltip-portal.ts, reset UA popover styles (border: "none", background: "transparent", padding: "0", outline: "none") and inject a backdrop reset stylesheet.
  2. In tooltip.ts, reset tooltipElement.style when custom is true (renderTooltipBody is active).

I am opening a PR with this fix.

Ngôn ngữ chính
TypeScript
Star
850
Fork
56
Merge trung bình
3 giờ 59 phút
Pull request đã merge (30 ngày)
19

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của TanStack/charts

Tất cả issue của TanStack/charts

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.