refactor(tooltip): enhance tooltip

__tests__/integration/snapshots/tooltip/alphabet-interval-full/step0.html

@@ -0,0 +1,75 @@
+<div
+  xmlns="http://www.w3.org/1999/xhtml"
+  class="tooltip"
+  style="pointer-events: none; position: absolute; visibility: visible; z-index: 8; transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.12); border-radius: 4px; color: rgba(0, 0, 0, 0.65); font-size: 12px; line-height: 20px; padding: 12px; min-width: 120px; max-width: 360px; font-family: Roboto-Regular; left: 10px; top: 10px;"
+>
+  <div
+    class="tooltip-title"
+    style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+  >
+    steelblue
+  </div>
+  <ul
+    class="tooltip-list"
+    style="margin: 0px; list-style-type: none; padding: 0px;"
+  >
+    <li
+      class="tooltip-list-item"
+      data-index="0"
+      style="list-style-type: none; margin-top: 12px; display: flex; line-height: 1em; align-items: center; justify-content: space-between; white-space: nowrap;"
+    >
+      <span
+        class="tooltip-list-item-name"
+        style="display: flex; align-items: center; max-width: 216px;"
+      >
+        <span
+          class="tooltip-list-item-marker"
+          style="background: steelblue; width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="tooltip-list-item-name-label"
+          title="letter"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+        >
+          letter
+        </span>
+      </span>
+      <span
+        class="tooltip-list-item-value"
+        title="A"
+        style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+      >
+        A
+      </span>
+    </li>
+    <li
+      class="tooltip-list-item"
+      data-index="1"
+      style="list-style-type: none; margin-top: 12px; display: flex; line-height: 1em; align-items: center; justify-content: space-between; white-space: nowrap;"
+    >
+      <span
+        class="tooltip-list-item-name"
+        style="display: flex; align-items: center; max-width: 216px;"
+      >
+        <span
+          class="tooltip-list-item-marker"
+          style="background: steelblue; width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="tooltip-list-item-name-label"
+          title="frequency"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+        >
+          frequency
+        </span>
+      </span>
+      <span
+        class="tooltip-list-item-value"
+        title="0.08167"
+        style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+      >
+        0.08167
+      </span>
+    </li>
+  </ul>
+</div>;

__tests__/integration/snapshots/tooltip/alphabet-interval-multi-field/step0.html

@@ -0,0 +1,75 @@
+<div
+  xmlns="http://www.w3.org/1999/xhtml"
+  class="tooltip"
+  style="pointer-events: none; position: absolute; visibility: visible; z-index: 8; transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.12); border-radius: 4px; color: rgba(0, 0, 0, 0.65); font-size: 12px; line-height: 20px; padding: 12px; min-width: 120px; max-width: 360px; font-family: Roboto-Regular; left: 10px; top: 10px;"
+>
+  <div
+    class="tooltip-title"
+    style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+  >
+    A
+  </div>
+  <ul
+    class="tooltip-list"
+    style="margin: 0px; list-style-type: none; padding: 0px;"
+  >
+    <li
+      class="tooltip-list-item"
+      data-index="0"
+      style="list-style-type: none; margin-top: 12px; display: flex; line-height: 1em; align-items: center; justify-content: space-between; white-space: nowrap;"
+    >
+      <span
+        class="tooltip-list-item-name"
+        style="display: flex; align-items: center; max-width: 216px;"
+      >
+        <span
+          class="tooltip-list-item-marker"
+          style="background: steelblue; width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="tooltip-list-item-name-label"
+          title="letter"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+        >
+          letter
+        </span>
+      </span>
+      <span
+        class="tooltip-list-item-value"
+        title="A"
+        style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+      >
+        A
+      </span>
+    </li>
+    <li
+      class="tooltip-list-item"
+      data-index="1"
+      style="list-style-type: none; margin-top: 12px; display: flex; line-height: 1em; align-items: center; justify-content: space-between; white-space: nowrap;"
+    >
+      <span
+        class="tooltip-list-item-name"
+        style="display: flex; align-items: center; max-width: 216px;"
+      >
+        <span
+          class="tooltip-list-item-marker"
+          style="background: steelblue; width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="tooltip-list-item-name-label"
+          title="frequency"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+        >
+          frequency
+        </span>
+      </span>
+      <span
+        class="tooltip-list-item-value"
+        title="0.08167"
+        style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+      >
+        0.08167
+      </span>
+    </li>
+  </ul>
+</div>;

__tests__/integration/snapshots/tooltip/morley-box-channel/step0.html

@@ -0,0 +1,162 @@
+<div
+  xmlns="http://www.w3.org/1999/xhtml"
+  class="tooltip"
+  style="pointer-events: none; position: absolute; visibility: visible; z-index: 8; transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.12); border-radius: 4px; color: rgba(0, 0, 0, 0.65); font-size: 12px; line-height: 20px; padding: 12px; min-width: 120px; max-width: 360px; font-family: Roboto-Regular; left: 10px; top: 10px;"
+>
+  <div
+    class="tooltip-title"
+    style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+  >
+    1
+  </div>
+  <ul
+    class="tooltip-list"
+    style="margin: 0px; list-style-type: none; padding: 0px;"
+  >
+    <li
+      class="tooltip-list-item"
+      data-index="0"
+      style="list-style-type: none; margin-top: 12px; display: flex; line-height: 1em; align-items: center; justify-content: space-between; white-space: nowrap;"
+    >
+      <span
+        class="tooltip-list-item-name"
+        style="display: flex; align-items: center; max-width: 216px;"
+      >
+        <span
+          class="tooltip-list-item-marker"
+          style="background: rgb(170, 170, 170); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="tooltip-list-item-name-label"
+          title="min"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+        >
+          min
+        </span>
+      </span>
+      <span
+        class="tooltip-list-item-value"
+        title="740"
+        style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+      >
+        740
+      </span>
+    </li>
+    <li
+      class="tooltip-list-item"
+      data-index="1"
+      style="list-style-type: none; margin-top: 12px; display: flex; line-height: 1em; align-items: center; justify-content: space-between; white-space: nowrap;"
+    >
+      <span
+        class="tooltip-list-item-name"
+        style="display: flex; align-items: center; max-width: 216px;"
+      >
+        <span
+          class="tooltip-list-item-marker"
+          style="background: rgb(170, 170, 170); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="tooltip-list-item-name-label"
+          title="q1"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+        >
+          q1
+        </span>
+      </span>
+      <span
+        class="tooltip-list-item-value"
+        title="850"
+        style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+      >
+        850
+      </span>
+    </li>
+    <li
+      class="tooltip-list-item"
+      data-index="2"
+      style="list-style-type: none; margin-top: 12px; display: flex; line-height: 1em; align-items: center; justify-content: space-between; white-space: nowrap;"
+    >
+      <span
+        class="tooltip-list-item-name"
+        style="display: flex; align-items: center; max-width: 216px;"
+      >
+        <span
+          class="tooltip-list-item-marker"
+          style="background: rgb(170, 170, 170); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="tooltip-list-item-name-label"
+          title="q2"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+        >
+          q2
+        </span>
+      </span>
+      <span
+        class="tooltip-list-item-value"
+        title="940"
+        style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+      >
+        940
+      </span>
+    </li>
+    <li
+      class="tooltip-list-item"
+      data-index="3"
+      style="list-style-type: none; margin-top: 12px; display: flex; line-height: 1em; align-items: center; justify-content: space-between; white-space: nowrap;"
+    >
+      <span
+        class="tooltip-list-item-name"
+        style="display: flex; align-items: center; max-width: 216px;"
+      >
+        <span
+          class="tooltip-list-item-marker"
+          style="background: rgb(170, 170, 170); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="tooltip-list-item-name-label"
+          title="q3"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+        >
+          q3
+        </span>
+      </span>
+      <span
+        class="tooltip-list-item-value"
+        title="980"
+        style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+      >
+        980
+      </span>
+    </li>
+    <li
+      class="tooltip-list-item"
+      data-index="4"
+      style="list-style-type: none; margin-top: 12px; display: flex; line-height: 1em; align-items: center; justify-content: space-between; white-space: nowrap;"
+    >
+      <span
+        class="tooltip-list-item-name"
+        style="display: flex; align-items: center; max-width: 216px;"
+      >
+        <span
+          class="tooltip-list-item-marker"
+          style="background: red; width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="tooltip-list-item-name-label"
+          title="max"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+        >
+          max
+        </span>
+      </span>
+      <span
+        class="tooltip-list-item-value"
+        title="1070"
+        style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+      >
+        1070
+      </span>
+    </li>
+  </ul>
+</div>;

__tests__/plots/tooltip/aapl-line.ts

@@ -14,6 +14,8 @@ export function aaplLine(): G2Spec {
         encode: {
           x: 'date',
           y: 'close',
+        },
+        tooltip: {
           title: (d) => new Date(d.date).toUTCString(),
         },
       },

__tests__/plots/tooltip/alphabet-interval-full.ts

@@ -0,0 +1,27 @@
+import { G2Spec } from '../../../src';
+import { tooltipSteps } from './utils';
+
+export function alphabetIntervalFull(): G2Spec {
+  return {
+    type: 'interval',
+    padding: 0,
+    data: {
+      type: 'fetch',
+      value: 'data/alphabet.csv',
+    },
+    axis: false,
+    legend: false,
+    encode: {
+      x: 'letter',
+      y: 'frequency',
+      color: 'steelblue',
+    },
+    tooltip: {
+      title: { channel: 'color' },
+      items: ['letter', 'frequency'],
+    },
+    interaction: { tooltip: true },
+  };
+}
+
+alphabetIntervalFull.steps = tooltipSteps(0);

__tests__/plots/tooltip/alphabet-interval-multi-field.ts

@@ -0,0 +1,31 @@
+import { G2Spec } from '../../../src';
+import { tooltipSteps } from './utils';
+
+export function alphabetIntervalMultiField(): G2Spec {
+  return {
+    type: 'view',
+    children: [
+      {
+        type: 'interval',
+        padding: 0,
+        data: {
+          type: 'fetch',
+          value: 'data/alphabet.csv',
+        },
+        axis: false,
+        legend: false,
+        encode: {
+          x: 'letter',
+          y: 'frequency',
+          color: 'steelblue',
+        },
+        tooltip: [{ field: 'letter' }, { field: 'frequency' }],
+      },
+    ],
+    interaction: {
+      tooltip: true,
+    },
+  };
+}
+
+alphabetIntervalMultiField.steps = tooltipSteps(0);

__tests__/plots/tooltip/alphabet-interval-multi.ts

@@ -18,8 +18,8 @@ export function alphabetIntervalMulti(): G2Spec {
           x: 'letter',
           y: 'frequency',
           color: 'steelblue',
-          tooltip: ['letter', 'frequency'],
         },
+        tooltip: ['letter', 'frequency'],
       },
     ],
     interaction: {