Component | Tooltip | Crosshair: Add default horizontal placement for…

… Crosshair

- Add `_defaultHorizontalPlacement` property to store the default horizontal placement for Tooltip
- Use `_getHorizontalPlacement()` to get the configured horizontal placement, falling back to the default if not set
- Set the default horizontal placement to `Position.Right` when used with Crosshair

packages/ts/src/components/crosshair/index.ts

@@ -10,6 +10,9 @@ import { isNumber, isArray, getNumber, clamp, getStackedValues, getNearest, isFu
 import { smartTransition } from 'utils/d3'
 import { getColor } from 'utils/color'
 
+// Types
+import { Position } from 'types/position'
+
 // Local Types
 import { CrosshairAccessors, CrosshairCircle } from './types'
 
@@ -179,6 +182,7 @@ export class Crosshair<Datum> extends XYComponentCore<Datum, CrosshairConfigInte
     const content = config.template(this.datum, this.xScale.invert(this.x))
     // Force set `followCursor` to `true` because we don't want Crosshair's tooltip to be hoverable
     tooltip.config.followCursor = true
+    tooltip.config.horizontalPlacement = tooltip.config.horizontalPlacement || Position.Right
     if (content) tooltip.show(content, { x, y })
   }
 

packages/ts/src/components/tooltip/config.ts

@@ -15,7 +15,7 @@ export interface TooltipConfigInterface {
   /** Allow the tooltip to be hovered over and interacted with when `followCursor` is set to `false`.
    * Default: `true` */
   allowHover?: boolean;
-  /** Horizontal placement of the tooltip. Default: `Position.Auto` */
+  /** Horizontal placement of the tooltip. Default: `Position.Auto` (or `Position.Right` if used with Crosshair) */
   horizontalPlacement?: Position | string | undefined;
   /** Horizontal shift of the tooltip in pixels. Works only with
    * `horizontalPlacement` set to `Position.Left` or `Position.Right`.
@@ -71,7 +71,7 @@ export const TooltipDefaultConfig: TooltipConfigInterface = {
   container: undefined,
   followCursor: true,
   allowHover: true,
-  horizontalPlacement: Position.Auto,
+  horizontalPlacement: undefined, // The default is set in `./index.ts` through  `_defaultHorizontalPlacement`
   horizontalShift: 0,
   verticalPlacement: Position.Top,
   verticalShift: 0,

packages/ts/src/components/tooltip/index.ts

@@ -31,6 +31,11 @@ export class Tooltip {
   private _hoveredElement: HTMLElement | SVGElement
   private _position: [number, number]
 
+  // We store the default horizontal placement here because we want Crosshair
+  // to be able to set another default (`Position.Right`) via config unless
+  // it has been explicitly set by the user
+  private _defaultHorizontalPlacement = Position.Auto
+
   constructor (config: TooltipConfigInterface = {}) {
     this.element = document.createElement('div')
     this.div = select(this.element).attr('class', s.root)
@@ -133,9 +138,10 @@ export class Tooltip {
     const tooltipWidth = this.element.offsetWidth
     const tooltipHeight = this.element.offsetHeight
 
-    const horizontalPlacement = config.horizontalPlacement === Position.Auto
+    const configuredHorizontalPlacement = this._getHorizontalPlacement()
+    const horizontalPlacement = configuredHorizontalPlacement === Position.Auto
       ? Position.Center
-      : config.horizontalPlacement
+      : configuredHorizontalPlacement
 
     const verticalPlacement = config.verticalPlacement === Position.Auto
       ? ((pos.y - tooltipHeight) < 0 ? Position.Bottom : Position.Top)
@@ -185,10 +191,11 @@ export class Tooltip {
       pageY: hoveredElementRect.y,
     }, this._container)
 
-    const horizontalPlacement = config.horizontalPlacement === Position.Auto
+    const configuredHorizontalPlacement = this._getHorizontalPlacement()
+    const horizontalPlacement = configuredHorizontalPlacement === Position.Auto
       ? (elementPos[0] - tooltipWidth < 0 ? Position.Right
         : elementPos[0] + tooltipWidth > containerWidth ? Position.Left : Position.Center)
-      : config.horizontalPlacement
+      : configuredHorizontalPlacement
 
     let translateX = 0
     switch (horizontalPlacement) {
@@ -295,6 +302,10 @@ export class Tooltip {
     }
   }
 
+  private _getHorizontalPlacement (): TooltipConfigInterface['horizontalPlacement'] {
+    return this.config.horizontalPlacement || this._defaultHorizontalPlacement
+  }
+
   private _setUpEvents (): void {
     const { config } = this