From b5147057adfec77749a50a36eb3b8a420eaa31e4 Mon Sep 17 00:00:00 2001
From: MiniPear <pearminipro@gmail.com>
Date: Thu, 21 Dec 2023 17:00:31 +0800
Subject: [PATCH] fix(series): interval background

---
 .../step1.svg                                 |  24 +-
 .../step0.svg                                 |  20 +-
 .../step0.svg                                 |  24 +-
 .../step2.svg                                 |  24 +-
 .../step0.svg                                 |  24 +-
 .../step0.svg                                 |  24 +-
 .../step1.svg                                 |  24 +-
 .../step3.svg                                 |  24 +-
 .../step0.svg                                 |  24 +-
 .../step2.svg                                 |  24 +-
 .../step3.svg                                 |  48 +-
 .../step0.svg                                 |  24 +-
 .../step2.svg                                 |  24 +-
 .../step0.svg                                 | 538 ++++++++++++++++++
 .../penguins-point-highlight/step0.svg        |  24 +-
 .../step0.svg                                 |  24 +-
 .../step0.svg                                 |  24 +-
 .../step2.svg                                 |  24 +-
 .../step0.svg                                 |  24 +-
 __tests__/plots/interaction/index.ts          |   1 +
 .../mock-interval-tooltip-background.ts       | 126 ++++
 src/interaction/utils.ts                      |   2 +-
 22 files changed, 892 insertions(+), 227 deletions(-)
 create mode 100644 __tests__/integration/snapshots/interaction/mock-interval-tooltip-background/step0.svg
 create mode 100644 __tests__/plots/interaction/mock-interval-tooltip-background.ts

diff --git a/__tests__/integration/snapshots/interaction/alphabet-interval-active-scrollbar/step1.svg b/__tests__/integration/snapshots/interaction/alphabet-interval-active-scrollbar/step1.svg
index f78cb3b27c..9d2e60ab0d 100644
--- a/__tests__/integration/snapshots/interaction/alphabet-interval-active-scrollbar/step1.svg
+++ b/__tests__/integration/snapshots/interaction/alphabet-interval-active-scrollbar/step1.svg
@@ -353,24 +353,24 @@
             width="608"
             height="412"
           />
+          <g transform="matrix(1,0,0,1,555.607178,0)">
+            <path
+              id="g-svg-135"
+              fill="rgba(204,214,236,1)"
+              d="M 0,0 l 41.889103448275705,0 l 0,412 l-41.889103448275705 0 z"
+              width="41.889103448275705"
+              height="412"
+              fill-opacity="0.3"
+              stroke-width="0"
+              class="element-background"
+            />
+          </g>
           <g
             id="g-svg-41"
             fill="none"
             transform="matrix(1,0,0,1,0,0)"
             class="main-layer"
           >
-            <g transform="matrix(1,0,0,1,555.607178,0)">
-              <path
-                id="g-svg-135"
-                fill="rgba(204,214,236,1)"
-                d="M 0,0 l 41.889103448275705,0 l 0,412 l-41.889103448275705 0 z"
-                width="41.889103448275705"
-                height="412"
-                fill-opacity="0.3"
-                stroke-width="0"
-                class="element-background"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,566.068970,363.605743)">
               <path
                 id="g-svg-44"
diff --git a/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-background-polar/step0.svg b/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-background-polar/step0.svg
index 06723eb24f..4e7b4927b9 100644
--- a/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-background-polar/step0.svg
+++ b/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-background-polar/step0.svg
@@ -58,22 +58,22 @@
             width="608"
             height="448"
           />
+          <g transform="matrix(1,0,0,1,304,158.834999)">
+            <path
+              id="g-svg-19"
+              fill="rgba(204,214,236,1)"
+              d="M 214.312,0 A 224 224 0 0 1 212.181 136.964 L 0,65.165 Z"
+              fill-opacity="0.3"
+              stroke-width="0"
+              class="element-background"
+            />
+          </g>
           <g
             id="g-svg-7"
             fill="none"
             transform="matrix(1,0,0,1,0,0)"
             class="main-layer"
           >
-            <g transform="matrix(1,0,0,1,304,158.834999)">
-              <path
-                id="g-svg-19"
-                fill="rgba(204,214,236,1)"
-                d="M 214.312,0 A 224 224 0 0 1 212.181 136.964 L 0,65.165 Z"
-                fill-opacity="0.3"
-                stroke-width="0"
-                class="element-background"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,304,194.121000)">
               <path
                 id="g-svg-9"
diff --git a/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-background-style/step0.svg b/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-background-style/step0.svg
index 8aef862d14..909892fe44 100644
--- a/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-background-style/step0.svg
+++ b/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-background-style/step0.svg
@@ -58,24 +58,24 @@
             width="608"
             height="448"
           />
+          <g transform="matrix(1,0,0,1,259.781830,0)">
+            <path
+              id="g-svg-14"
+              fill="rgba(204,214,236,1)"
+              d="M 10,0 l 68.4363636363637,0 a 10,10,0,0,1,10,10 l 0,428 a 10,10,0,0,1,-10,10 l -68.4363636363637,0 a 10,10,0,0,1,-10,-10 l 0,-428 a 10,10,0,0,1,10,-10 z"
+              width="88.4363636363637"
+              height="448"
+              fill-opacity="0.3"
+              stroke-width="0"
+              class="element-background"
+            />
+          </g>
           <g
             id="g-svg-7"
             fill="none"
             transform="matrix(1,0,0,1,0,0)"
             class="main-layer"
           >
-            <g transform="matrix(1,0,0,1,259.781830,0)">
-              <path
-                id="g-svg-14"
-                fill="rgba(204,214,236,1)"
-                d="M 10,0 l 68.4363636363637,0 a 10,10,0,0,1,10,10 l 0,428 a 10,10,0,0,1,-10,10 l -68.4363636363637,0 a 10,10,0,0,1,-10,-10 l 0,-428 a 10,10,0,0,1,10,-10 z"
-                width="88.4363636363637"
-                height="448"
-                fill-opacity="0.3"
-                stroke-width="0"
-                class="element-background"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,276.363647,219.324005)">
               <path
                 id="g-svg-9"
diff --git a/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-background-style/step2.svg b/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-background-style/step2.svg
index 126f006568..a8732a1d2d 100644
--- a/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-background-style/step2.svg
+++ b/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-background-style/step2.svg
@@ -58,24 +58,24 @@
             width="608"
             height="448"
           />
+          <g transform="matrix(1,0,0,1,38.690910,0)">
+            <path
+              id="g-svg-15"
+              fill="rgba(255,0,0,1)"
+              d="M 10,0 l 68.43636363636364,0 a 10,10,0,0,1,10,10 l 0,428 a 10,10,0,0,1,-10,10 l -68.43636363636364,0 a 10,10,0,0,1,-10,-10 l 0,-428 a 10,10,0,0,1,10,-10 z"
+              width="88.43636363636364"
+              height="448"
+              fill-opacity="0.3"
+              stroke-width="0"
+              class="element-background"
+            />
+          </g>
           <g
             id="g-svg-7"
             fill="none"
             transform="matrix(1,0,0,1,0,0)"
             class="main-layer"
           >
-            <g transform="matrix(1,0,0,1,38.690910,0)">
-              <path
-                id="g-svg-15"
-                fill="rgba(255,0,0,1)"
-                d="M 10,0 l 68.43636363636364,0 a 10,10,0,0,1,10,10 l 0,428 a 10,10,0,0,1,-10,10 l -68.43636363636364,0 a 10,10,0,0,1,-10,-10 l 0,-428 a 10,10,0,0,1,10,-10 z"
-                width="88.43636363636364"
-                height="448"
-                fill-opacity="0.3"
-                stroke-width="0"
-                class="element-background"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,276.363647,219.324005)">
               <path
                 id="g-svg-9"
diff --git a/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-background-transpose/step0.svg b/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-background-transpose/step0.svg
index d6e9c1a94a..8081046486 100644
--- a/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-background-transpose/step0.svg
+++ b/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-background-transpose/step0.svg
@@ -58,24 +58,24 @@
             width="608"
             height="448"
           />
+          <g transform="matrix(1,0,0,1,0,183.313461)">
+            <path
+              id="g-svg-14"
+              fill="rgba(204,214,236,1)"
+              d="M 0,0 l 608,0 l 0,81.37309090909093 l-608 0 z"
+              width="608"
+              height="81.37309090909093"
+              fill-opacity="0.3"
+              stroke-width="0"
+              class="element-background"
+            />
+          </g>
           <g
             id="g-svg-7"
             fill="none"
             transform="matrix(1,0,0,1,0,0)"
             class="main-layer"
           >
-            <g transform="matrix(1,0,0,1,0,183.313461)">
-              <path
-                id="g-svg-14"
-                fill="rgba(204,214,236,1)"
-                d="M 0,0 l 608,0 l 0,81.37309090909093 l-608 0 z"
-                width="608"
-                height="81.37309090909093"
-                fill-opacity="0.3"
-                stroke-width="0"
-                class="element-background"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,203.636368)">
               <path
                 id="g-svg-9"
diff --git a/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-background/step0.svg b/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-background/step0.svg
index 5a453fafb5..3182ec99d3 100644
--- a/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-background/step0.svg
+++ b/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-background/step0.svg
@@ -58,24 +58,24 @@
             width="608"
             height="448"
           />
+          <g transform="matrix(1,0,0,1,248.782547,0)">
+            <path
+              id="g-svg-14"
+              fill="rgba(204,214,236,1)"
+              d="M 0,0 l 110.43490909090909,0 l 0,448 l-110.43490909090909 0 z"
+              width="110.43490909090909"
+              height="448"
+              fill-opacity="0.3"
+              stroke-width="0"
+              class="element-background"
+            />
+          </g>
           <g
             id="g-svg-7"
             fill="none"
             transform="matrix(1,0,0,1,0,0)"
             class="main-layer"
           >
-            <g transform="matrix(1,0,0,1,248.782547,0)">
-              <path
-                id="g-svg-14"
-                fill="rgba(204,214,236,1)"
-                d="M 0,0 l 110.43490909090909,0 l 0,448 l-110.43490909090909 0 z"
-                width="110.43490909090909"
-                height="448"
-                fill-opacity="0.3"
-                stroke-width="0"
-                class="element-background"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,276.363647,219.324005)">
               <path
                 id="g-svg-9"
diff --git a/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-background/step1.svg b/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-background/step1.svg
index 5a453fafb5..3182ec99d3 100644
--- a/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-background/step1.svg
+++ b/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-background/step1.svg
@@ -58,24 +58,24 @@
             width="608"
             height="448"
           />
+          <g transform="matrix(1,0,0,1,248.782547,0)">
+            <path
+              id="g-svg-14"
+              fill="rgba(204,214,236,1)"
+              d="M 0,0 l 110.43490909090909,0 l 0,448 l-110.43490909090909 0 z"
+              width="110.43490909090909"
+              height="448"
+              fill-opacity="0.3"
+              stroke-width="0"
+              class="element-background"
+            />
+          </g>
           <g
             id="g-svg-7"
             fill="none"
             transform="matrix(1,0,0,1,0,0)"
             class="main-layer"
           >
-            <g transform="matrix(1,0,0,1,248.782547,0)">
-              <path
-                id="g-svg-14"
-                fill="rgba(204,214,236,1)"
-                d="M 0,0 l 110.43490909090909,0 l 0,448 l-110.43490909090909 0 z"
-                width="110.43490909090909"
-                height="448"
-                fill-opacity="0.3"
-                stroke-width="0"
-                class="element-background"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,276.363647,219.324005)">
               <path
                 id="g-svg-9"
diff --git a/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-background/step3.svg b/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-background/step3.svg
index f006660c12..05fab14eb1 100644
--- a/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-background/step3.svg
+++ b/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-background/step3.svg
@@ -58,24 +58,24 @@
             width="608"
             height="448"
           />
+          <g transform="matrix(1,0,0,1,27.691637,0)">
+            <path
+              id="g-svg-15"
+              fill="rgba(204,214,236,1)"
+              d="M 0,0 l 110.43490909090912,0 l 0,448 l-110.43490909090912 0 z"
+              width="110.43490909090912"
+              height="448"
+              fill-opacity="0.3"
+              stroke-width="0"
+              class="element-background"
+            />
+          </g>
           <g
             id="g-svg-7"
             fill="none"
             transform="matrix(1,0,0,1,0,0)"
             class="main-layer"
           >
-            <g transform="matrix(1,0,0,1,27.691637,0)">
-              <path
-                id="g-svg-15"
-                fill="rgba(204,214,236,1)"
-                d="M 0,0 l 110.43490909090912,0 l 0,448 l-110.43490909090912 0 z"
-                width="110.43490909090912"
-                height="448"
-                fill-opacity="0.3"
-                stroke-width="0"
-                class="element-background"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,276.363647,219.324005)">
               <path
                 id="g-svg-9"
diff --git a/__tests__/integration/snapshots/interaction/alphabet-interval-select-background/step0.svg b/__tests__/integration/snapshots/interaction/alphabet-interval-select-background/step0.svg
index 6e4cdcfd58..9337cd4e2c 100644
--- a/__tests__/integration/snapshots/interaction/alphabet-interval-select-background/step0.svg
+++ b/__tests__/integration/snapshots/interaction/alphabet-interval-select-background/step0.svg
@@ -58,24 +58,24 @@
             width="608"
             height="448"
           />
+          <g transform="matrix(1,0,0,1,262.545441,0)">
+            <path
+              id="g-svg-14"
+              fill="rgba(204,214,236,1)"
+              d="M 10,0 l 62.90909090909099,0 a 10,10,0,0,1,10,10 l 0,428 a 10,10,0,0,1,-10,10 l -62.90909090909099,0 a 10,10,0,0,1,-10,-10 l 0,-428 a 10,10,0,0,1,10,-10 z"
+              width="82.90909090909099"
+              height="448"
+              fill-opacity="0.3"
+              stroke-width="0"
+              class="element-background"
+            />
+          </g>
           <g
             id="g-svg-7"
             fill="none"
             transform="matrix(1,0,0,1,0,0)"
             class="main-layer"
           >
-            <g transform="matrix(1,0,0,1,262.545441,0)">
-              <path
-                id="g-svg-14"
-                fill="rgba(204,214,236,1)"
-                d="M 10,0 l 62.90909090909099,0 a 10,10,0,0,1,10,10 l 0,428 a 10,10,0,0,1,-10,10 l -62.90909090909099,0 a 10,10,0,0,1,-10,-10 l 0,-428 a 10,10,0,0,1,10,-10 z"
-                width="82.90909090909099"
-                height="448"
-                fill-opacity="0.3"
-                stroke-width="0"
-                class="element-background"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,276.363647,219.324005)">
               <path
                 id="g-svg-9"
diff --git a/__tests__/integration/snapshots/interaction/alphabet-interval-select-background/step2.svg b/__tests__/integration/snapshots/interaction/alphabet-interval-select-background/step2.svg
index 249caa9069..21b71d1d48 100644
--- a/__tests__/integration/snapshots/interaction/alphabet-interval-select-background/step2.svg
+++ b/__tests__/integration/snapshots/interaction/alphabet-interval-select-background/step2.svg
@@ -58,24 +58,24 @@
             width="608"
             height="448"
           />
+          <g transform="matrix(1,0,0,1,262.545441,0)">
+            <path
+              id="g-svg-15"
+              fill="rgba(204,214,236,1)"
+              d="M 10,0 l 62.90909090909099,0 a 10,10,0,0,1,10,10 l 0,428 a 10,10,0,0,1,-10,10 l -62.90909090909099,0 a 10,10,0,0,1,-10,-10 l 0,-428 a 10,10,0,0,1,10,-10 z"
+              width="82.90909090909099"
+              height="448"
+              fill-opacity="0.3"
+              stroke-width="0"
+              class="element-background"
+            />
+          </g>
           <g
             id="g-svg-7"
             fill="none"
             transform="matrix(1,0,0,1,0,0)"
             class="main-layer"
           >
-            <g transform="matrix(1,0,0,1,262.545441,0)">
-              <path
-                id="g-svg-15"
-                fill="rgba(204,214,236,1)"
-                d="M 10,0 l 62.90909090909099,0 a 10,10,0,0,1,10,10 l 0,428 a 10,10,0,0,1,-10,10 l -62.90909090909099,0 a 10,10,0,0,1,-10,-10 l 0,-428 a 10,10,0,0,1,10,-10 z"
-                width="82.90909090909099"
-                height="448"
-                fill-opacity="0.3"
-                stroke-width="0"
-                class="element-background"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,276.363647,219.324005)">
               <path
                 id="g-svg-9"
diff --git a/__tests__/integration/snapshots/interaction/alphabet-interval-select-background/step3.svg b/__tests__/integration/snapshots/interaction/alphabet-interval-select-background/step3.svg
index e303156202..e6174dbd29 100644
--- a/__tests__/integration/snapshots/interaction/alphabet-interval-select-background/step3.svg
+++ b/__tests__/integration/snapshots/interaction/alphabet-interval-select-background/step3.svg
@@ -58,36 +58,36 @@
             width="608"
             height="448"
           />
+          <g transform="matrix(1,0,0,1,262.545441,0)">
+            <path
+              id="g-svg-15"
+              fill="rgba(204,214,236,1)"
+              d="M 10,0 l 62.90909090909099,0 a 10,10,0,0,1,10,10 l 0,428 a 10,10,0,0,1,-10,10 l -62.90909090909099,0 a 10,10,0,0,1,-10,-10 l 0,-428 a 10,10,0,0,1,10,-10 z"
+              width="82.90909090909099"
+              height="448"
+              fill-opacity="0.3"
+              stroke-width="0"
+              class="element-background"
+            />
+          </g>
+          <g transform="matrix(1,0,0,1,41.454544,0)">
+            <path
+              id="g-svg-16"
+              fill="rgba(204,214,236,1)"
+              d="M 10,0 l 62.90909090909091,0 a 10,10,0,0,1,10,10 l 0,428 a 10,10,0,0,1,-10,10 l -62.90909090909091,0 a 10,10,0,0,1,-10,-10 l 0,-428 a 10,10,0,0,1,10,-10 z"
+              width="82.9090909090909"
+              height="448"
+              fill-opacity="0.3"
+              stroke-width="0"
+              class="element-background"
+            />
+          </g>
           <g
             id="g-svg-7"
             fill="none"
             transform="matrix(1,0,0,1,0,0)"
             class="main-layer"
           >
-            <g transform="matrix(1,0,0,1,262.545441,0)">
-              <path
-                id="g-svg-15"
-                fill="rgba(204,214,236,1)"
-                d="M 10,0 l 62.90909090909099,0 a 10,10,0,0,1,10,10 l 0,428 a 10,10,0,0,1,-10,10 l -62.90909090909099,0 a 10,10,0,0,1,-10,-10 l 0,-428 a 10,10,0,0,1,10,-10 z"
-                width="82.90909090909099"
-                height="448"
-                fill-opacity="0.3"
-                stroke-width="0"
-                class="element-background"
-              />
-            </g>
-            <g transform="matrix(1,0,0,1,41.454544,0)">
-              <path
-                id="g-svg-16"
-                fill="rgba(204,214,236,1)"
-                d="M 10,0 l 62.90909090909091,0 a 10,10,0,0,1,10,10 l 0,428 a 10,10,0,0,1,-10,10 l -62.90909090909091,0 a 10,10,0,0,1,-10,-10 l 0,-428 a 10,10,0,0,1,10,-10 z"
-                width="82.9090909090909"
-                height="448"
-                fill-opacity="0.3"
-                stroke-width="0"
-                class="element-background"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,276.363647,219.324005)">
               <path
                 id="g-svg-9"
diff --git a/__tests__/integration/snapshots/interaction/alphabet-interval-select-single-background/step0.svg b/__tests__/integration/snapshots/interaction/alphabet-interval-select-single-background/step0.svg
index 20f1ba4168..6c76de42c1 100644
--- a/__tests__/integration/snapshots/interaction/alphabet-interval-select-single-background/step0.svg
+++ b/__tests__/integration/snapshots/interaction/alphabet-interval-select-single-background/step0.svg
@@ -58,24 +58,24 @@
             width="608"
             height="448"
           />
+          <g transform="matrix(1,0,0,1,248.782547,0)">
+            <path
+              id="g-svg-14"
+              fill="rgba(204,214,236,1)"
+              d="M 0,0 l 110.43490909090909,0 l 0,448 l-110.43490909090909 0 z"
+              width="110.43490909090909"
+              height="448"
+              fill-opacity="0.3"
+              stroke-width="0"
+              class="element-background"
+            />
+          </g>
           <g
             id="g-svg-7"
             fill="none"
             transform="matrix(1,0,0,1,0,0)"
             class="main-layer"
           >
-            <g transform="matrix(1,0,0,1,248.782547,0)">
-              <path
-                id="g-svg-14"
-                fill="rgba(204,214,236,1)"
-                d="M 0,0 l 110.43490909090909,0 l 0,448 l-110.43490909090909 0 z"
-                width="110.43490909090909"
-                height="448"
-                fill-opacity="0.3"
-                stroke-width="0"
-                class="element-background"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,276.363647,219.324005)">
               <path
                 id="g-svg-9"
diff --git a/__tests__/integration/snapshots/interaction/alphabet-interval-select-single-background/step2.svg b/__tests__/integration/snapshots/interaction/alphabet-interval-select-single-background/step2.svg
index 32a3ccacd8..6ae8f82ca1 100644
--- a/__tests__/integration/snapshots/interaction/alphabet-interval-select-single-background/step2.svg
+++ b/__tests__/integration/snapshots/interaction/alphabet-interval-select-single-background/step2.svg
@@ -58,24 +58,24 @@
             width="608"
             height="448"
           />
+          <g transform="matrix(1,0,0,1,248.782547,0)">
+            <path
+              id="g-svg-15"
+              fill="rgba(204,214,236,1)"
+              d="M 0,0 l 110.43490909090909,0 l 0,448 l-110.43490909090909 0 z"
+              width="110.43490909090909"
+              height="448"
+              fill-opacity="0.3"
+              stroke-width="0"
+              class="element-background"
+            />
+          </g>
           <g
             id="g-svg-7"
             fill="none"
             transform="matrix(1,0,0,1,0,0)"
             class="main-layer"
           >
-            <g transform="matrix(1,0,0,1,248.782547,0)">
-              <path
-                id="g-svg-15"
-                fill="rgba(204,214,236,1)"
-                d="M 0,0 l 110.43490909090909,0 l 0,448 l-110.43490909090909 0 z"
-                width="110.43490909090909"
-                height="448"
-                fill-opacity="0.3"
-                stroke-width="0"
-                class="element-background"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,276.363647,219.324005)">
               <path
                 id="g-svg-9"
diff --git a/__tests__/integration/snapshots/interaction/mock-interval-tooltip-background/step0.svg b/__tests__/integration/snapshots/interaction/mock-interval-tooltip-background/step0.svg
new file mode 100644
index 0000000000..19cfec3469
--- /dev/null
+++ b/__tests__/integration/snapshots/interaction/mock-interval-tooltip-background/step0.svg
@@ -0,0 +1,538 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="640"
+  height="480"
+  style="background: transparent;"
+  color-interpolation-filters="sRGB"
+>
+  <defs>
+    <clipPath transform="matrix(1,0,0,1,-16,-16)" id="clip-path-40-16">
+      <use href="#g-svg-40" transform="matrix(1,0,0,1,16,16)" />
+    </clipPath>
+  </defs>
+  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
+    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
+      <g id="g-svg-3" fill="none" transform="matrix(1,0,0,1,0,0)" class="view">
+        <g transform="matrix(1,0,0,1,0,0)">
+          <path
+            id="g-svg-4"
+            fill="rgba(0,0,0,0)"
+            class="area"
+            d="M 0,0 l 640,0 l 0,480 l-640 0 z"
+            width="640"
+            height="480"
+          />
+        </g>
+        <g transform="matrix(1,0,0,1,16,16)">
+          <path
+            id="g-svg-5"
+            fill="rgba(0,0,0,0)"
+            class="area"
+            d="M 0,0 l 608,0 l 0,448 l-608 0 z"
+            width="608"
+            height="448"
+          />
+        </g>
+        <g transform="matrix(1,0,0,1,16,51)">
+          <path
+            id="g-svg-6"
+            fill="rgba(0,0,0,0)"
+            class="area"
+            d="M 0,0 l 608,0 l 0,413 l-608 0 z"
+            width="608"
+            height="413"
+          />
+        </g>
+        <g transform="matrix(1,0,0,1,16,51)">
+          <path
+            id="g-svg-7"
+            fill="rgba(0,0,0,0)"
+            class="area"
+            d="M 0,0 l 608,0 l 0,413 l-608 0 z"
+            width="608"
+            height="413"
+          />
+        </g>
+        <g
+          id="g-svg-8"
+          fill="none"
+          transform="matrix(1,0,0,1,0,0)"
+          class="component"
+        >
+          <g
+            id="g-svg-9"
+            fill="none"
+            width="608"
+            height="23"
+            transform="matrix(1,0,0,1,16,16)"
+          >
+            <g
+              id="g-svg-10"
+              fill="none"
+              class="legend-category"
+              width="163.12"
+              height="23"
+              transform="matrix(1,0,0,1,0,0)"
+            >
+              <g
+                id="g-svg-11"
+                fill="none"
+                transform="matrix(1,0,0,1,0,0)"
+                class="legend-title-group"
+              >
+                <g
+                  id="g-svg-12"
+                  fill="none"
+                  width="163.12"
+                  height="23"
+                  transform="matrix(1,0,0,1,0,0)"
+                  class="legend-title"
+                />
+              </g>
+              <g
+                id="g-svg-13"
+                fill="none"
+                transform="matrix(1,0,0,1,0,0)"
+                class="legend-items-group"
+              >
+                <g
+                  id="g-svg-14"
+                  fill="none"
+                  width="163.12"
+                  height="23"
+                  transform="matrix(1,0,0,1,0,0)"
+                  class="legend-items"
+                >
+                  <g
+                    id="g-svg-15"
+                    fill="none"
+                    transform="matrix(1,0,0,1,0,0)"
+                    class="items-navigator"
+                  >
+                    <g
+                      id="g-svg-16"
+                      fill="none"
+                      class="navigator-content-group"
+                      transform="matrix(1,0,0,1,0,0)"
+                      clip-path="url(#clip-path-40-16)"
+                    >
+                      <g
+                        id="g-svg-17"
+                        fill="none"
+                        class="navigator-play-window"
+                        transform="matrix(1,0,0,1,0,0)"
+                      >
+                        <g
+                          id="g-svg-35"
+                          fill="none"
+                          class="items-item-page"
+                          transform="matrix(1,0,0,1,0,0)"
+                        >
+                          <g
+                            id="g-svg-19"
+                            fill="none"
+                            transform="matrix(1,0,0,1,0,0)"
+                            class="items-item"
+                            width="62.239999999999995"
+                            height="23"
+                          >
+                            <g
+                              id="g-svg-25"
+                              fill="none"
+                              transform="matrix(1,0,0,1,0,0)"
+                              class="legend-category-item-background-group"
+                            >
+                              <g transform="matrix(1,0,0,1,0,0)">
+                                <path
+                                  id="g-svg-26"
+                                  fill="rgba(0,0,0,0)"
+                                  class="legend-category-item-background"
+                                  d="M 0,0 l 62.239999999999995,0 l 0,23 l-62.239999999999995 0 z"
+                                  width="62.239999999999995"
+                                  height="23"
+                                  visibility="visible"
+                                />
+                              </g>
+                            </g>
+                            <g
+                              id="g-svg-20"
+                              fill="none"
+                              transform="matrix(0.500000,0,0,0.500000,4,11.500000)"
+                              class="legend-category-item-marker-group"
+                            >
+                              <g transform="matrix(1,0,0,1,-8,-8)">
+                                <path
+                                  id="g-svg-21"
+                                  fill="rgba(23,131,255,1)"
+                                  d="M 0,0 L 16,0 L 16,16 L 0,16 Z"
+                                  stroke-width="0"
+                                  class="legend-category-item-marker"
+                                  visibility="visible"
+                                />
+                              </g>
+                            </g>
+                            <g
+                              id="g-svg-22"
+                              fill="none"
+                              transform="matrix(1,0,0,1,16,11.500000)"
+                              class="legend-category-item-label-group"
+                            >
+                              <g transform="matrix(1,0,0,1,0,0)">
+                                <text
+                                  id="g-svg-23"
+                                  fill="rgba(29,33,41,1)"
+                                  dominant-baseline="central"
+                                  paint-order="stroke"
+                                  dx="0.5"
+                                  font-family="sans-serif"
+                                  font-size="12"
+                                  font-style="normal"
+                                  font-variant="normal"
+                                  font-weight="normal"
+                                  stroke-width="1"
+                                  text-anchor="left"
+                                  class="legend-category-item-label"
+                                  fill-opacity="0.9"
+                                  visibility="visible"
+                                >
+                                  TotalHc
+                                </text>
+                              </g>
+                            </g>
+                            <g
+                              id="g-svg-24"
+                              fill="none"
+                              transform="matrix(1,0,0,1,0,0)"
+                              class="legend-category-item-value-group"
+                            />
+                          </g>
+                          <g
+                            id="g-svg-27"
+                            fill="none"
+                            transform="matrix(1,0,0,1,74.239998,0)"
+                            class="items-item"
+                            width="76.88000000000001"
+                            height="23"
+                          >
+                            <g
+                              id="g-svg-33"
+                              fill="none"
+                              transform="matrix(1,0,0,1,0,0)"
+                              class="legend-category-item-background-group"
+                            >
+                              <g transform="matrix(1,0,0,1,0,0)">
+                                <path
+                                  id="g-svg-34"
+                                  fill="rgba(0,0,0,0)"
+                                  class="legend-category-item-background"
+                                  d="M 0,0 l 76.88000000000001,0 l 0,23 l-76.88000000000001 0 z"
+                                  width="76.88000000000001"
+                                  height="23"
+                                  visibility="visible"
+                                />
+                              </g>
+                            </g>
+                            <g
+                              id="g-svg-28"
+                              fill="none"
+                              transform="matrix(0.500000,0,0,0.500000,4,11.500000)"
+                              class="legend-category-item-marker-group"
+                            >
+                              <g transform="matrix(1,0,0,1,-8,-8)">
+                                <path
+                                  id="g-svg-29"
+                                  fill="rgba(0,201,201,1)"
+                                  d="M 0,0 L 16,0 L 16,16 L 0,16 Z"
+                                  stroke-width="0"
+                                  class="legend-category-item-marker"
+                                  visibility="visible"
+                                />
+                              </g>
+                            </g>
+                            <g
+                              id="g-svg-30"
+                              fill="none"
+                              transform="matrix(1,0,0,1,16,11.500000)"
+                              class="legend-category-item-label-group"
+                            >
+                              <g transform="matrix(1,0,0,1,0,0)">
+                                <text
+                                  id="g-svg-31"
+                                  fill="rgba(29,33,41,1)"
+                                  dominant-baseline="central"
+                                  paint-order="stroke"
+                                  dx="0.5"
+                                  font-family="sans-serif"
+                                  font-size="12"
+                                  font-style="normal"
+                                  font-variant="normal"
+                                  font-weight="normal"
+                                  stroke-width="1"
+                                  text-anchor="left"
+                                  class="legend-category-item-label"
+                                  fill-opacity="0.9"
+                                  visibility="visible"
+                                >
+                                  CurrentHc
+                                </text>
+                              </g>
+                            </g>
+                            <g
+                              id="g-svg-32"
+                              fill="none"
+                              transform="matrix(1,0,0,1,0,0)"
+                              class="legend-category-item-value-group"
+                            />
+                          </g>
+                        </g>
+                      </g>
+                    </g>
+                    <g
+                      id="g-svg-18"
+                      fill="none"
+                      transform="matrix(1,0,0,1,0,0)"
+                      class="navigator-controller"
+                    />
+                    <g transform="matrix(1,0,0,1,0,0)">
+                      <path
+                        id="g-svg-40"
+                        fill="none"
+                        d="M 0,0 l 151.11999786376953,0 l 0,23 l-151.11999786376953 0 z"
+                        class="navigator-clip-path"
+                        width="151.11999786376953"
+                        height="23"
+                      />
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+        <g transform="matrix(1,0,0,1,16,51)">
+          <path
+            id="g-svg-41"
+            fill="rgba(0,0,0,0)"
+            class="plot"
+            d="M 0,0 l 608,0 l 0,413 l-608 0 z"
+            width="608"
+            height="413"
+          />
+          <g transform="matrix(1,0,0,1,4.324507,0)">
+            <path
+              id="g-svg-59"
+              fill="rgba(255,0,0,1)"
+              d="M 0,0 l 85.5481690140845,0 l 0,413 l-85.5481690140845 0 z"
+              width="85.5481690140845"
+              height="413"
+              stroke-width="0"
+              class="element-background"
+            />
+          </g>
+          <g
+            id="g-svg-42"
+            fill="none"
+            transform="matrix(1,0,0,1,0,0)"
+            class="main-layer"
+          >
+            <g transform="matrix(1,0,0,1,12.233400,6.217204)">
+              <path
+                id="g-svg-45"
+                fill="rgba(23,131,255,1)"
+                d="M 0,0 l 33.030181086519114,0 l 0,406.78279569892476 l-33.030181086519114 0 z"
+                width="33.030181086519114"
+                height="406.78279569892476"
+                fill-opacity="0.95"
+                stroke-width="0"
+                stroke="rgba(23,131,255,1)"
+                class="element"
+              />
+            </g>
+            <g transform="matrix(1,0,0,1,97.867203,4.144803)">
+              <path
+                id="g-svg-46"
+                fill="rgba(23,131,255,1)"
+                d="M 0,0 l 33.03018108651912,0 l 0,408.85519713261647 l-33.03018108651912 0 z"
+                width="33.03018108651912"
+                height="408.85519713261647"
+                fill-opacity="0.95"
+                stroke-width="0"
+                stroke="rgba(23,131,255,1)"
+                class="element"
+              />
+            </g>
+            <g transform="matrix(1,0,0,1,183.501007,5.551075)">
+              <path
+                id="g-svg-47"
+                fill="rgba(23,131,255,1)"
+                d="M 0,0 l 33.03018108651912,0 l 0,407.4489247311828 l-33.03018108651912 0 z"
+                width="33.03018108651912"
+                height="407.4489247311828"
+                fill-opacity="0.95"
+                stroke-width="0"
+                stroke="rgba(23,131,255,1)"
+                class="element"
+              />
+            </g>
+            <g transform="matrix(1,0,0,1,269.134796,0)">
+              <path
+                id="g-svg-48"
+                fill="rgba(23,131,255,1)"
+                d="M 0,0 l 33.03018108651912,0 l 0,413 l-33.03018108651912 0 z"
+                width="33.03018108651912"
+                height="413"
+                fill-opacity="0.95"
+                stroke-width="0"
+                stroke="rgba(23,131,255,1)"
+                class="element"
+              />
+            </g>
+            <g transform="matrix(1,0,0,1,354.768616,7.031362)">
+              <path
+                id="g-svg-49"
+                fill="rgba(23,131,255,1)"
+                d="M 0,0 l 33.03018108651912,0 l 0,405.96863799283153 l-33.03018108651912 0 z"
+                width="33.03018108651912"
+                height="405.96863799283153"
+                fill-opacity="0.95"
+                stroke-width="0"
+                stroke="rgba(23,131,255,1)"
+                class="element"
+              />
+            </g>
+            <g transform="matrix(1,0,0,1,440.402405,6.957348)">
+              <path
+                id="g-svg-50"
+                fill="rgba(23,131,255,1)"
+                d="M 0,0 l 33.03018108651918,0 l 0,406.0426523297491 l-33.03018108651918 0 z"
+                width="33.03018108651918"
+                height="406.0426523297491"
+                fill-opacity="0.95"
+                stroke-width="0"
+                stroke="rgba(23,131,255,1)"
+                class="element"
+              />
+            </g>
+            <g transform="matrix(1,0,0,1,526.036194,0)">
+              <path
+                id="g-svg-51"
+                fill="rgba(23,131,255,1)"
+                d="M 0,0 l 33.03018108651918,0 l 0,413 l-33.03018108651918 0 z"
+                width="33.03018108651918"
+                height="413"
+                fill-opacity="0.95"
+                stroke-width="0"
+                stroke="rgba(23,131,255,1)"
+                class="element"
+              />
+            </g>
+          </g>
+          <g
+            id="g-svg-43"
+            fill="none"
+            transform="matrix(1,0,0,1,0,0)"
+            class="main-layer"
+          >
+            <g transform="matrix(1,0,0,1,48.933601,6.217204)">
+              <path
+                id="g-svg-52"
+                fill="rgba(0,201,201,1)"
+                d="M 0,0 l 33.03018108651912,0 l 0,406.78279569892476 l-33.03018108651912 0 z"
+                width="33.03018108651912"
+                height="406.78279569892476"
+                fill-opacity="0.95"
+                stroke-width="0"
+                stroke="rgba(0,201,201,1)"
+                class="element"
+              />
+            </g>
+            <g transform="matrix(1,0,0,1,134.567398,4.144803)">
+              <path
+                id="g-svg-53"
+                fill="rgba(0,201,201,1)"
+                d="M 0,0 l 33.03018108651912,0 l 0,408.85519713261647 l-33.03018108651912 0 z"
+                width="33.03018108651912"
+                height="408.85519713261647"
+                fill-opacity="0.95"
+                stroke-width="0"
+                stroke="rgba(0,201,201,1)"
+                class="element"
+              />
+            </g>
+            <g transform="matrix(1,0,0,1,220.201202,5.551075)">
+              <path
+                id="g-svg-54"
+                fill="rgba(0,201,201,1)"
+                d="M 0,0 l 33.03018108651909,0 l 0,407.4489247311828 l-33.03018108651909 0 z"
+                width="33.03018108651909"
+                height="407.4489247311828"
+                fill-opacity="0.95"
+                stroke-width="0"
+                stroke="rgba(0,201,201,1)"
+                class="element"
+              />
+            </g>
+            <g transform="matrix(1,0,0,1,305.835022,0)">
+              <path
+                id="g-svg-55"
+                fill="rgba(0,201,201,1)"
+                d="M 0,0 l 33.03018108651912,0 l 0,413 l-33.03018108651912 0 z"
+                width="33.03018108651912"
+                height="413"
+                fill-opacity="0.95"
+                stroke-width="0"
+                stroke="rgba(0,201,201,1)"
+                class="element"
+              />
+            </g>
+            <g transform="matrix(1,0,0,1,391.468811,7.031362)">
+              <path
+                id="g-svg-56"
+                fill="rgba(0,201,201,1)"
+                d="M 0,0 l 33.03018108651912,0 l 0,405.96863799283153 l-33.03018108651912 0 z"
+                width="33.03018108651912"
+                height="405.96863799283153"
+                fill-opacity="0.95"
+                stroke-width="0"
+                stroke="rgba(0,201,201,1)"
+                class="element"
+              />
+            </g>
+            <g transform="matrix(1,0,0,1,477.102631,6.957348)">
+              <path
+                id="g-svg-57"
+                fill="rgba(0,201,201,1)"
+                d="M 0,0 l 33.03018108651912,0 l 0,406.0426523297491 l-33.03018108651912 0 z"
+                width="33.03018108651912"
+                height="406.0426523297491"
+                fill-opacity="0.95"
+                stroke-width="0"
+                stroke="rgba(0,201,201,1)"
+                class="element"
+              />
+            </g>
+            <g transform="matrix(1,0,0,1,562.736389,0)">
+              <path
+                id="g-svg-58"
+                fill="rgba(0,201,201,1)"
+                d="M 0,0 l 33.030181086519065,0 l 0,413 l-33.030181086519065 0 z"
+                width="33.030181086519065"
+                height="413"
+                fill-opacity="0.95"
+                stroke-width="0"
+                stroke="rgba(0,201,201,1)"
+                class="element"
+              />
+            </g>
+          </g>
+          <g
+            id="g-svg-44"
+            fill="none"
+            transform="matrix(1,0,0,1,0,0)"
+            class="label-layer"
+          />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/__tests__/integration/snapshots/interaction/penguins-point-highlight/step0.svg b/__tests__/integration/snapshots/interaction/penguins-point-highlight/step0.svg
index e3c249facd..e12e273e71 100644
--- a/__tests__/integration/snapshots/interaction/penguins-point-highlight/step0.svg
+++ b/__tests__/integration/snapshots/interaction/penguins-point-highlight/step0.svg
@@ -399,24 +399,24 @@
             width="608"
             height="413"
           />
+          <g transform="matrix(3,0,0,3,145.763641,128.666672)">
+            <path
+              id="g-svg-397"
+              fill="rgba(255,0,0,1)"
+              d="M 0,3 A 3 3 0 1 0 6 3 A 3 3 0 1 0 0 3 Z"
+              r="3"
+              stroke-opacity="0.95"
+              stroke-width="0"
+              class="element-background"
+              fill-opacity="0.3"
+            />
+          </g>
           <g
             id="g-svg-53"
             fill="none"
             transform="matrix(1,0,0,1,0,0)"
             class="main-layer"
           >
-            <g transform="matrix(3,0,0,3,145.763641,128.666672)">
-              <path
-                id="g-svg-397"
-                fill="rgba(255,0,0,1)"
-                d="M 0,3 A 3 3 0 1 0 6 3 A 3 3 0 1 0 0 3 Z"
-                r="3"
-                stroke-opacity="0.95"
-                stroke-width="0"
-                class="element-background"
-                fill-opacity="0.3"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,151.763641,134.666672)">
               <path
                 id="g-svg-55"
diff --git a/__tests__/integration/snapshots/interaction/state-ages-interval-highlight-color-background/step0.svg b/__tests__/integration/snapshots/interaction/state-ages-interval-highlight-color-background/step0.svg
index cb821a4cdc..064d6fdadb 100644
--- a/__tests__/integration/snapshots/interaction/state-ages-interval-highlight-color-background/step0.svg
+++ b/__tests__/integration/snapshots/interaction/state-ages-interval-highlight-color-background/step0.svg
@@ -864,24 +864,24 @@
             width="608"
             height="413"
           />
+          <g transform="matrix(1,0,0,1,-12.603333,0)">
+            <path
+              id="g-svg-166"
+              fill="rgba(204,214,236,1)"
+              d="M 0,0 l 126.53999999999999,0 l 0,413 l-126.53999999999999 0 z"
+              width="126.53999999999999"
+              height="413"
+              fill-opacity="0.3"
+              stroke-width="0"
+              class="element-background"
+            />
+          </g>
           <g
             id="g-svg-119"
             fill="none"
             transform="matrix(1,0,0,1,0,0)"
             class="main-layer"
           >
-            <g transform="matrix(1,0,0,1,-12.603333,0)">
-              <path
-                id="g-svg-166"
-                fill="rgba(204,214,236,1)"
-                d="M 0,0 l 126.53999999999999,0 l 0,413 l-126.53999999999999 0 z"
-                width="126.53999999999999"
-                height="413"
-                fill-opacity="0.3"
-                stroke-width="0"
-                class="element-background"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,0,359.166962)">
               <path
                 id="g-svg-121"
diff --git a/__tests__/integration/snapshots/interaction/state-ages-interval-highlight-group-background/step0.svg b/__tests__/integration/snapshots/interaction/state-ages-interval-highlight-group-background/step0.svg
index 3d3f320681..24c0fd2f0e 100644
--- a/__tests__/integration/snapshots/interaction/state-ages-interval-highlight-group-background/step0.svg
+++ b/__tests__/integration/snapshots/interaction/state-ages-interval-highlight-group-background/step0.svg
@@ -864,24 +864,24 @@
             width="548"
             height="413"
           />
+          <g transform="matrix(1,0,0,1,4.536721,0)">
+            <path
+              id="g-svg-175"
+              fill="rgba(204,214,236,1)"
+              d="M 0,0 l 89.74622950819672,0 l 0,413 l-89.74622950819672 0 z"
+              width="89.74622950819672"
+              height="413"
+              fill-opacity="0.3"
+              stroke-width="0"
+              class="element-background"
+            />
+          </g>
           <g
             id="g-svg-119"
             fill="none"
             transform="matrix(1,0,0,1,0,0)"
             class="main-layer"
           >
-            <g transform="matrix(1,0,0,1,4.536721,0)">
-              <path
-                id="g-svg-175"
-                fill="rgba(204,214,236,1)"
-                d="M 0,0 l 89.74622950819672,0 l 0,413 l-89.74622950819672 0 z"
-                width="89.74622950819672"
-                height="413"
-                fill-opacity="0.3"
-                stroke-width="0"
-                class="element-background"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,9.872095,54.812729)">
               <path
                 id="g-svg-121"
diff --git a/__tests__/integration/snapshots/interaction/state-ages-interval-highlight-group-background/step2.svg b/__tests__/integration/snapshots/interaction/state-ages-interval-highlight-group-background/step2.svg
index 94a256f720..07e2d35074 100644
--- a/__tests__/integration/snapshots/interaction/state-ages-interval-highlight-group-background/step2.svg
+++ b/__tests__/integration/snapshots/interaction/state-ages-interval-highlight-group-background/step2.svg
@@ -864,24 +864,24 @@
             width="548"
             height="413"
           />
+          <g transform="matrix(1,0,0,1,4.536721,0)">
+            <path
+              id="g-svg-176"
+              fill="rgba(204,214,236,1)"
+              d="M 0,0 l 89.74622950819672,0 l 0,413 l-89.74622950819672 0 z"
+              width="89.74622950819672"
+              height="413"
+              fill-opacity="0.3"
+              stroke-width="0"
+              class="element-background"
+            />
+          </g>
           <g
             id="g-svg-119"
             fill="none"
             transform="matrix(1,0,0,1,0,0)"
             class="main-layer"
           >
-            <g transform="matrix(1,0,0,1,4.536721,0)">
-              <path
-                id="g-svg-176"
-                fill="rgba(204,214,236,1)"
-                d="M 0,0 l 89.74622950819672,0 l 0,413 l-89.74622950819672 0 z"
-                width="89.74622950819672"
-                height="413"
-                fill-opacity="0.3"
-                stroke-width="0"
-                class="element-background"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,9.872095,54.812729)">
               <path
                 id="g-svg-121"
diff --git a/__tests__/integration/snapshots/interaction/waffle-cell-highlight-background/step0.svg b/__tests__/integration/snapshots/interaction/waffle-cell-highlight-background/step0.svg
index 93ad1f56d3..c9d452818d 100644
--- a/__tests__/integration/snapshots/interaction/waffle-cell-highlight-background/step0.svg
+++ b/__tests__/integration/snapshots/interaction/waffle-cell-highlight-background/step0.svg
@@ -864,24 +864,24 @@
             width="608"
             height="573"
           />
+          <g transform="matrix(1,0,0,1,304.030396,57.328651)">
+            <path
+              id="g-svg-221"
+              fill="rgba(255,0,0,1)"
+              d="M 0,0 l 60.739200000000096,0 l 0,57.2427 l-60.739200000000096 0 z"
+              width="60.739200000000096"
+              height="57.2427"
+              fill-opacity="0.3"
+              stroke-width="0"
+              class="element-background"
+            />
+          </g>
           <g
             id="g-svg-119"
             fill="none"
             transform="matrix(1,0,0,1,0,0)"
             class="main-layer"
           >
-            <g transform="matrix(1,0,0,1,304.030396,57.328651)">
-              <path
-                id="g-svg-221"
-                fill="rgba(255,0,0,1)"
-                d="M 0,0 l 60.739200000000096,0 l 0,57.2427 l-60.739200000000096 0 z"
-                width="60.739200000000096"
-                height="57.2427"
-                fill-opacity="0.3"
-                stroke-width="0"
-                class="element-background"
-              />
-            </g>
             <g transform="matrix(1,0,0,1,5,5)">
               <path
                 id="g-svg-121"
diff --git a/__tests__/plots/interaction/index.ts b/__tests__/plots/interaction/index.ts
index f5f4a3fc71..3199918c5a 100644
--- a/__tests__/plots/interaction/index.ts
+++ b/__tests__/plots/interaction/index.ts
@@ -77,3 +77,4 @@ export { alphabetIntervalActiveScrollbar } from './alphabet-interval-active-scro
 export { profitIntervalLegendFilterElementHighlight } from './profit-interval-legend-filter-element-highlight';
 export { stocksLineSlider } from './stocks-line-slider';
 export { alphabetIntervalCustom } from './alphabet-interval-custom';
+export { mockIntervalTooltipBackground } from './mock-interval-tooltip-background';
diff --git a/__tests__/plots/interaction/mock-interval-tooltip-background.ts b/__tests__/plots/interaction/mock-interval-tooltip-background.ts
new file mode 100644
index 0000000000..b12fab4f1c
--- /dev/null
+++ b/__tests__/plots/interaction/mock-interval-tooltip-background.ts
@@ -0,0 +1,126 @@
+import { G2Spec, ELEMENT_CLASS_NAME } from '../../../src';
+import { step } from './utils';
+
+export function mockIntervalTooltipBackground(): G2Spec {
+  return {
+    type: 'view',
+    data: [
+      {
+        Date: '2023年10月',
+        value: '20231031',
+        TotalHc: 1716,
+        CurrentHc: 5496,
+        HcPercent: 320.28,
+        start: 5496,
+        end: 5384,
+        BackgroundCurrentHc: 5496,
+      },
+      {
+        Date: '2023年11月',
+        value: '20231130',
+        TotalHc: 1739,
+        CurrentHc: 5524,
+        HcPercent: 317.65,
+        start: 5524,
+        end: 5412,
+        BackgroundCurrentHc: 5524,
+      },
+      {
+        Date: '2023年12月',
+        value: '20231211',
+        TotalHc: 1746,
+        CurrentHc: 5505,
+        HcPercent: 315.29,
+        start: 5505,
+        end: 5393,
+        BackgroundCurrentHc: 5505,
+      },
+      {
+        Date: '2023年06月',
+        value: '20230630',
+        TotalHc: 1724,
+        CurrentHc: 5580,
+        HcPercent: 323.67,
+        start: 5580,
+        end: 5468,
+        BackgroundCurrentHc: 5580,
+      },
+      {
+        Date: '2023年09月',
+        value: '20230930',
+        TotalHc: 1716,
+        CurrentHc: 5485,
+        HcPercent: 319.64,
+        start: 5485,
+        end: 5373,
+        BackgroundCurrentHc: 5485,
+      },
+      {
+        Date: '2023年08月',
+        value: '20230831',
+        TotalHc: 1710,
+        CurrentHc: 5486,
+        HcPercent: 320.82,
+        start: 5486,
+        end: 5374,
+        BackgroundCurrentHc: 5486,
+      },
+      {
+        Date: '2023年07月',
+        value: '20230731',
+        TotalHc: 1729,
+        CurrentHc: 5580,
+        HcPercent: 322.73,
+        start: 5580,
+        end: 5468,
+        BackgroundCurrentHc: 5580,
+      },
+    ],
+    children: [
+      {
+        type: 'interval',
+        encode: {
+          x: 'Date',
+          y: 'BackgroundCurrentHc',
+          color: () => 'TotalHc',
+          series: () => 'TotalHc',
+        },
+        state: {
+          active: {
+            backgroundFill: 'red',
+            backgroundFillOpacity: 1,
+          },
+        },
+      },
+      {
+        type: 'interval',
+        encode: {
+          x: 'Date',
+          y: 'CurrentHc',
+          color: () => 'CurrentHc',
+          series: () => 'CurrentHc',
+        },
+        state: {
+          active: {
+            backgroundFill: 'red',
+            backgroundFillOpacity: 1,
+          },
+        },
+      },
+    ],
+
+    interaction: {
+      elementHighlightByColor: {
+        background: true,
+        backgroundFill: 'red',
+      },
+    },
+  };
+}
+
+mockIntervalTooltipBackground.steps = ({ canvas }) => {
+  const { document } = canvas;
+  const elements = document.getElementsByClassName(ELEMENT_CLASS_NAME);
+  const [e1] = elements;
+  return [step(e1, 'pointerover')];
+};
diff --git a/src/interaction/utils.ts b/src/interaction/utils.ts
index 3075990750..189d4c13e8 100644
--- a/src/interaction/utils.ts
+++ b/src/interaction/utils.ts
@@ -433,7 +433,7 @@ export function renderBackground({
     const shapeOf = isOrdinalShape() ? bandShapeOf : cloneShapeOf;
     const shape = shapeOf(element, finalStyle);
     shape.className = BACKGROUND_CLASS_NAME;
-    element.parentNode.appendChild(shape);
+    element.parentNode.parentNode.appendChild(shape);
     element.background = shape;
   };