react-tooltip/dist/react-tooltip.d.ts

react tooltip component

import React$1, { ElementType, ReactNode, CSSProperties } from 'react';

type PlacesType =
  | 'top'
  | 'top-start'
  | 'top-end'
  | 'right'
  | 'right-start'
  | 'right-end'
  | 'bottom'
  | 'bottom-start'
  | 'bottom-end'
  | 'left'
  | 'left-start'
  | 'left-end'

type VariantType = 'dark' | 'light' | 'success' | 'warning' | 'error' | 'info'

type WrapperType = ElementType | 'div' | 'span'

type PositionStrategy = 'absolute' | 'fixed'

type DataAttribute =
  | 'place'
  | 'content'
  | 'variant'
  | 'offset'
  | 'wrapper'
  | 'position-strategy'
  | 'delay-show'
  | 'delay-hide'
  | 'auto-close'
  | 'float'
  | 'hidden'
  | 'class-name'

/**
 * @description floating-ui middleware
 */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
type Middleware = any

interface IPosition {
  x: number
  y: number
}

interface TooltipImperativeOpenOptions {
  anchorSelect?: string
  position?: IPosition
  place?: PlacesType
  content?: ReactNode
  /**
   * @description Delay (in ms) before opening the tooltip.
   */
  delay?: number
}

interface TooltipImperativeCloseOptions {
  /**
   * @description Delay (in ms) before closing the tooltip.
   */
  delay?: number
}

interface TooltipRefProps {
  open: (options?: TooltipImperativeOpenOptions) => void
  close: (options?: TooltipImperativeCloseOptions) => void
  /**
   * @readonly
   */
  activeAnchor: Element | null
  /**
   * @readonly
   */
  place: PlacesType
  /**
   * @readonly
   */
  isOpen: boolean
}

type AnchorClickEvents = 'click' | 'dblclick' | 'mousedown' | 'mouseup'

type AnchorOpenEvents = Partial<
  Record<'mouseenter' | 'focus' | 'mouseover' | AnchorClickEvents, boolean>
>
type AnchorCloseEvents = Partial<
  Record<'mouseleave' | 'blur' | 'mouseout' | AnchorClickEvents, boolean>
>
type GlobalCloseEvents = {
  escape?: boolean
  scroll?: boolean
  resize?: boolean
  clickOutsideAnchor?: boolean
}

interface ITooltipController {
  className?: string
  classNameArrow?: string
  content?: ReactNode
  portalRoot?: Element | null
  render?: (render: { content: ReactNode | null; activeAnchor: Element | null }) => ReactNode
  place?: PlacesType
  offset?: number
  id?: string
  variant?: VariantType
  anchorSelect?: string
  wrapper?: WrapperType
  children?: ReactNode
  openOnClick?: boolean
  positionStrategy?: PositionStrategy
  middlewares?: Middleware[]
  delayShow?: number
  delayHide?: number
  autoClose?: number
  float?: boolean
  hidden?: boolean
  noArrow?: boolean
  clickable?: boolean
  /**
   * @description The events to be listened on anchor elements to open the tooltip.
   */
  openEvents?: AnchorOpenEvents
  /**
   * @description The events to be listened on anchor elements to close the tooltip.
   */
  closeEvents?: AnchorCloseEvents
  /**
   * @description The global events listened to close the tooltip.
   */
  globalCloseEvents?: GlobalCloseEvents
  /**
   * @description Used to disable default tooltip behavior.
   * Overrides `openEvents`, `closeEvents`, and `globalCloseEvents`.
   */
  imperativeModeOnly?: boolean
  style?: CSSProperties
  position?: IPosition
  isOpen?: boolean
  defaultIsOpen?: boolean
  disableStyleInjection?: boolean | 'core'
  /**
   * @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']
  opacity?: CSSProperties['opacity']
  arrowColor?: CSSProperties['backgroundColor']
  arrowSize?: number
  setIsOpen?: (value: boolean) => void
  afterShow?: () => void
  afterHide?: () => void
  disableTooltip?: (anchorRef: Element | null) => boolean
  role?: React.AriaRole
}

declare module 'react' {
  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
    'data-tooltip-id'?: string
    'data-tooltip-place'?: PlacesType
    'data-tooltip-content'?: string | null
    'data-tooltip-variant'?: VariantType
    'data-tooltip-offset'?: number
    'data-tooltip-wrapper'?: WrapperType
    'data-tooltip-position-strategy'?: PositionStrategy
    'data-tooltip-delay-show'?: number
    'data-tooltip-delay-hide'?: number
    'data-tooltip-auto-close'?: number
    'data-tooltip-float'?: boolean
    'data-tooltip-hidden'?: boolean
    'data-tooltip-class-name'?: string
  }
}

declare const _default: React$1.MemoExoticComponent<React$1.ForwardRefExoticComponent<ITooltipController & React$1.RefAttributes<TooltipRefProps>>>;

export { _default as Tooltip };
export type { DataAttribute, IPosition, ITooltipController as ITooltip, Middleware, PlacesType, PositionStrategy, TooltipRefProps, VariantType, WrapperType };