Paint the ApexCharts tooltip arrow directly so it stays dark in Safari (#3084)

This commit is contained in:
Paweł Kuna authored and GitHub committed 2026-09-17 23:57:28 +02:00
1 parent 78a41b55ed
commit cac3179e39
2 files changed
+14

No files matched your search

@@ -0,0 +1,5 @@
---
"@tabler/core": patch
---
Fixed the ApexCharts tooltip arrow staying white in Safari by painting `.apexcharts-tooltip-arrow` directly.
+9
View File
@@ -45,6 +45,15 @@
box-shadow: none !important; box-shadow: none !important;
} }
// Paint the arrow directly as well: it reads its colour through two levels of
// custom properties (--apx-tt-arrow-bg → --apx-tt-bg), and some browsers drop a
// light-dark() value on the way, leaving a transparent arrow with a border in
// the text colour — a white arrow on the dark tooltip.
.apexcharts-tooltip-arrow {
background: $tooltip-bg !important;
border-color: $tooltip-bg !important;
}
.apexcharts-tooltip-title { .apexcharts-tooltip-title {
padding: 0.25rem 0.5rem !important; padding: 0.25rem 0.5rem !important;
margin: 0 !important; margin: 0 !important;