Tooltip: First attempt to get tooltip in bounds anyway

src/theme/ods-chart-theme.ts

@@ -419,15 +419,15 @@ export class ODSChartsTheme {
       lineStyle: {
         width: 2,
         color:
-          ODSChartsMode.LIGHT === this.options.mode ? '#CCCCCC' : '#CCCCCC',
+          ODSChartsMode.LIGHT === this.options.mode ? '#CCCCCC' : '#666666',
       },
     };
     const splitLine = {
       show: true,
       lineStyle: {
         width: 1,
         color:
-          ODSChartsMode.LIGHT === this.options.mode ? '#CCCCCC' : '#CCCCCC',
+          ODSChartsMode.LIGHT === this.options.mode ? '#CCCCCC' : '#666666',
       },
     };
     const themeOptions: any = {

src/theme/popover/ods-chart-popover-definitions.ts

@@ -97,6 +97,19 @@ export class ODSChartsPopoverConfig {
    * - false: to display popover
    */
   tooltip?: boolean;
+  /**
+   * @experimental
+   * Whether confine popover content in the view rect of chart instance by rendering the arrow close to the mouse position.
+   *
+   * - true: to display tooltip inside the chart at any cost
+   * - false: to display tooltip normally
+   *
+   * @remarks
+   * Right now, this experimental option is not linked to the default behavior of Apache ECharts `tooltip.confine` option.
+   *
+   * So `tooltipConfine` can't be used at the same time as Apache ECharts `tooltip.confine` option. They are mutually exclusive.
+   */
+  tooltipConfine?: boolean;
   /**
    * tooltipTimeout is used to set the timeout in milliseconds of the tooltip display.
    *

src/theme/popover/ods-chart-popover.ts

@@ -37,22 +37,13 @@ const DEFAULT_TEMPLATE_CSS = `
   pointer-events: none !important;
 }
 
-.ods-charts-popover .ods-charts-popover-holder {
-  display: inline-block;
-  position: absolute;
-  bottom: 12px;
-  left: 0;
-}
-
 .ods-charts-popover .ods-charts-popover-inner  {
-  margin-left: -50%;
   display: inline-block;
   background-color: white;
   border: 2px solid rgb(204, 204, 204);
   padding: 20px 18px 20px 18px;
 }
 
-
 .ods-charts-popover .ods-charts-popover-header {
   color: black;
   font-size: 18px;
@@ -65,7 +56,7 @@ const DEFAULT_TEMPLATE_CSS = `
   bottom: -8px;
   width: 20px;
   height: 10px;
-  left: -10px;
+  left: calc(50% - 10px);
 }
 
 
@@ -119,6 +110,7 @@ const DEFAULT_NONE_CSS = `
 export class ODSChartsPopover {
   private tooltipTimeOut: any;
   private tooltipDelay: any;
+  private tooltipStyle: string = '';
   private constructor(
     private popoverDefinition: ODSChartsPopoverDefinition,
     private popoverConfig: ODSChartsPopoverConfig
@@ -147,6 +139,9 @@ export class ODSChartsPopover {
     if (undefined === popoverConfig.tooltip) {
       popoverConfig.tooltip = true;
     }
+    if (undefined === popoverConfig.tooltipConfine) {
+      popoverConfig.tooltipConfine = false;
+    }
     if (undefined === popoverConfig.tooltipDelay) {
       popoverConfig.tooltipDelay =
         undefined === popoverDefinition.tooltipDelay
@@ -322,6 +317,7 @@ export class ODSChartsPopover {
         tooltip: {
           appendTo: 'body',
           enterable: true,
+          confine: this.popoverConfig.tooltipConfine,
         },
         [tooltipTrigger]: {
           axisPointer: {
@@ -344,8 +340,37 @@ export class ODSChartsPopover {
       if (!this.popoverDefinition.getOrCreatePopupInstance) {
         mergeObjects(popoverOptions, {
           tooltip: {
-            position: function (pt: [number, number]) {
-              return [pt[0], pt[1]];
+            position: (pos: any, params: any, dom: any, rect: any, size: any) => {
+              let obj: any = {
+                left: pos[0] - size.contentSize[0] / 2,
+              };
+
+              if (this.popoverConfig.tooltipConfine) {
+                const x = pos[0];
+                const arrowSize = 10;
+                const bottom = pos[1] > size.contentSize[1];
+                let tmp;
+
+                obj[['top', 'bottom'][+bottom]] = bottom ? size.viewSize[1] - pos[1] + 10 : pos[1] + 10;              
+
+                if (x > size.viewSize[0] - size.contentSize[0] / 2) {
+                  tmp = Math.min(pos[0] - size.viewSize[0] + size.contentSize[0] - arrowSize, size.contentSize[0] - arrowSize * 2 - 5);
+                } else if (x < size.contentSize[0] / 2) {
+                  tmp = Math.max(pos[0] - arrowSize, 5);
+                } else {
+                  tmp = size.contentSize[0] / 2 - arrowSize;
+                }
+
+                this.tooltipStyle = `${tmp}px;`;
+
+                if (!bottom) {
+                  this.tooltipStyle += ' top: -8px; transform: scaleY(-1);';
+                }
+              } else {
+                obj['top'] = pos[1] - size.contentSize[1] - 10;
+              }
+
+              return obj;
             },
 
             formatter: (
@@ -556,7 +581,7 @@ export class ODSChartsPopover {
     }
 
     return `
-  <div class="ods-charts-popover-holder class="ods-charts-mode-${mode}" ${ODSChartsItemCSSDefinition.getClasses(
+  <div class="ods-charts-popover-holder ods-charts-mode-${mode} ${ODSChartsItemCSSDefinition.getClasses(
       cssTheme.popover?.odsChartsPopoverHolder
     )}" style="${ODSChartsItemCSSDefinition.getStyles(
       cssTheme.popover?.odsChartsPopoverHolder
@@ -575,7 +600,7 @@ export class ODSChartsPopover {
           cssTheme.popover?.odsChartsPopoverArrow
         )}" style="${ODSChartsItemCSSDefinition.getStyles(
       cssTheme.popover?.odsChartsPopoverArrow
-    )}" ></div>
+    )}; left: ${this.tooltipStyle}" ></div>
           <div class="ods-charts-popover-header ${ODSChartsItemCSSDefinition.getClasses(
             cssTheme.popover?.odsChartsPopoverHeader
           )}" style="${ODSChartsItemCSSDefinition.getStyles(