Add "border" option including arrow

docs/docs/options.mdx

@@ -114,13 +114,14 @@ import { Tooltip } from 'react-tooltip';
 | `closeOnEsc` | `boolean` | no | `false` | `true` `false` | Pressing escape key will close the tooltip |
 | `closeOnScroll` | `boolean` | no | `false` | `true` `false` | Scrolling will close the tooltip (for this to work, scroll element must be either the root html tag, the tooltip parent, or the anchor parent) |
 | `closeOnEsc` | `boolean` | no | `false` | `true` `false` | Resizing the window will close the tooltip |
-| `style` | `CSSProperties` | no | | a React inline style | Add inline styles directly to the tooltip |
+| `style` | `CSSProperties` | no | | a CSS style object  | Add inline styles directly to the tooltip |
 | `position` | `{ x: number; y: number }` | no | | any `number` value for both `x` and `y` | Override the tooltip position on the DOM |
 | `isOpen` | `boolean` | no | handled by internal state | `true` `false` | The tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip (can be used **without** `setIsOpen`) |
 | `setIsOpen` | `function` | no | | | The tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip |
 | `afterShow` | `function` | no | | | A function to be called after the tooltip is shown |
 | `afterHide` | `function` | no | | | A function to be called after the tooltip is hidden |
 | `middlewares` | `Middleware[]` | no | | array of valid `floating-ui` middlewares | Allows for advanced customization. Check the [`floating-ui` docs](https://floating-ui.com/docs/middleware) for more information |
+| `border` | `CSSProperties['border']` | no | | a CSS border style | Change the style of the tooltip border (including the arrow) |
 
 ### Envs
 

src/components/Tooltip/Tooltip.tsx

@@ -44,6 +44,7 @@ const Tooltip = ({
  setIsOpen,
  activeAnchor,
  setActiveAnchor,
+ border,
 }: ITooltip) => {
  const tooltipRef = useRef<HTMLElement>(null)
  const tooltipArrowRef = useRef<HTMLElement>(null)
@@ -237,6 +238,7 @@ const Tooltip = ({
  tooltipArrowReference: tooltipArrowRef.current,
  strategy: positionStrategy,
  middlewares,
+ border,
  }).then((computedStylesData) => {
  if (Object.keys(computedStylesData.tooltipStyles).length) {
  setInlineStyles(computedStylesData.tooltipStyles)
@@ -503,6 +505,7 @@ const Tooltip = ({
  tooltipArrowReference: tooltipArrowRef.current,
  strategy: positionStrategy,
  middlewares,
+ border,
  }).then((computedStylesData) => {
  if (!mounted.current) {
  // invalidate computed positions after remount

src/components/Tooltip/TooltipTypes.d.ts

@@ -89,4 +89,5 @@ export interface ITooltip {
  afterHide?: () => void
  activeAnchor: HTMLElement | null
  setActiveAnchor: (anchor: HTMLElement | null) => void
+ border?: CSSProperties['border']
 }

src/components/TooltipController/TooltipController.tsx

@@ -12,6 +12,7 @@ import type {
 } from 'components/Tooltip/TooltipTypes'
 import { useTooltip } from 'components/TooltipProvider'
 import { TooltipContent } from 'components/TooltipContent'
+import { cssAttrIsValid } from 'utils/css-attr-is-valid'
 import type { ITooltipController } from './TooltipControllerTypes'
 
 const TooltipController = ({
@@ -44,6 +45,7 @@ const TooltipController = ({
  style,
  position,
  isOpen,
+ border,
  setIsOpen,
  afterShow,
  afterHide,
@@ -235,6 +237,22 @@ const TooltipController = ({
  }
  }, [anchorRefs, providerActiveAnchor, activeAnchor, anchorId, anchorSelect])
 
+ useEffect(() => {
+ if (process.env.NODE_ENV === 'production') {
+ return
+ }
+ if (style?.border) {
+ // eslint-disable-next-line no-console
+ console.warn('[react-tooltip] Do not set `style.border`. Use `border` prop instead.')
+ }
+ if (border && !cssAttrIsValid('border', border)) {
+ // eslint-disable-next-line no-console
+ console.warn(
+ `[react-tooltip] "${border}" is not a valid \`border\`. See https://developer.mozilla.org/en-US/docs/Web/CSS/border`,
+ )
+ }
+ }, [])
+
  /**
  * content priority: children < render or content < html
  * children should be lower priority so that it can be used as the "default" content
@@ -283,6 +301,7 @@ const TooltipController = ({
  style,
  position,
  isOpen,
+ border,
  setIsOpen,
  afterShow,
  afterHide,

src/components/TooltipController/TooltipControllerTypes.d.ts

@@ -60,6 +60,13 @@ export interface ITooltipController {
  style?: CSSProperties
  position?: IPosition
  isOpen?: boolean
+ /**
+ * @description see https://developer.mozilla.org/en-US/docs/Web/CSS/border.
+ *
+ * Adding a border with width > 3px, or with `em/cm/rem/...` instead of `px`
+ * might break the tooltip arrow positioning.
+ */
+ border?: CSSProperties['border']
  setIsOpen?: (value: boolean) => void
  afterShow?: () => void
  afterHide?: () => void

src/utils/compute-positions-types.d.ts

@@ -1,3 +1,4 @@
+import { CSSProperties } from 'react'
 import type { Middleware } from '../components/Tooltip/TooltipTypes'
 
 export interface IComputePositions {
@@ -20,4 +21,5 @@ export interface IComputePositions {
  offset?: number
  strategy?: 'absolute' | 'fixed'
  middlewares?: Middleware[]
+ border?: CSSProperties['border']
 }

src/utils/compute-positions.ts

@@ -9,6 +9,7 @@ export const computeTooltipPosition = async ({
  offset: offsetValue = 10,
  strategy = 'absolute',
  middlewares = [offset(Number(offsetValue)), flip(), shift({ padding: 5 })],
+ border,
 }: IComputePositions) => {
  if (!elementReference) {
  // elementReference can be null or undefined and we will not compute the position
@@ -31,7 +32,7 @@ export const computeTooltipPosition = async ({
  strategy,
  middleware,
  }).then(({ x, y, placement, middlewareData }) => {
- const styles = { left: `${x}px`, top: `${y}px` }
+ const styles = { left: `${x}px`, top: `${y}px`, border }
 
  const { x: arrowX, y: arrowY } = middlewareData.arrow ?? { x: 0, y: 0 }
 
@@ -43,12 +44,35 @@ export const computeTooltipPosition = async ({
  left: 'right',
  }[placement.split('-')[0]] ?? 'bottom'
 
+ const borderSide =
+ border &&
+ {
+ top: { borderBottom: border, borderRight: border },
+ right: { borderBottom: border, borderLeft: border },
+ bottom: { borderTop: border, borderLeft: border },
+ left: { borderTop: border, borderRight: border },
+ }[placement.split('-')[0]]
+
+ let borderWidth = 0
+ if (border) {
+ const match = `${border}`.match(/(\d+)px/)
+ if (match?.[1]) {
+ borderWidth = Number(match[1])
+ } else {
+ /**
+ * this means `border` was set without `width`, or non-px value
+ */
+ borderWidth = 1
+ }
+ }
+
  const arrowStyle = {
  left: arrowX != null ? `${arrowX}px` : '',
  top: arrowY != null ? `${arrowY}px` : '',
  right: '',
  bottom: '',
- [staticSide]: '-4px',
+ ...borderSide,
+ [staticSide]: `-${4 + borderWidth}px`,
  }
 
  return { tooltipStyles: styles, tooltipArrowStyles: arrowStyle, place: placement }

src/utils/css-attr-is-valid.ts

@@ -0,0 +1,25 @@
+export const cssAttrIsValid = (attr: string, value: unknown) => {
+ const iframe = document.createElement('iframe')
+ Object.apply(iframe.style, {
+ display: 'none',
+ // in case `display: none` not supported
+ width: '0px',
+ height: '0px',
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ } as any)
+ document.body.appendChild(iframe)
+ if (!iframe.contentDocument) {
+ return true
+ }
+ const style = iframe.contentDocument.createElement('style')
+ style.innerHTML = `.test-css { ${attr}: ${value}; }`
+ iframe.contentDocument.head.appendChild(style)
+ const { sheet } = style
+ if (!sheet) {
+ return true
+ }
+ const result = sheet.cssRules[0].cssText
+ iframe.remove()
+ const match = result.match(new RegExp(`${attr}:`))
+ return !!match
+}