Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface TooltipHookOptions<E>

remarks

@since 2.8.0

Type parameters

  • E: HTMLElement

Hierarchy

Index

Properties

Properties

baseId

baseId: string

This is the DOM id to use for the tooltipped element and is used to generate an id for the Tooltip component as:

const tooltipId = `${baseId}-tooltip`

Optional defaultPosition

defaultPosition?: SimplePosition

An optional position to use before the positioning calculation has occurred. This is also used to determine if the position should be horizontal vs vertical.

Vertical - "below" or "above" Horizontal - "left" or "right"

defaultvalue

"below"

Optional dense

dense?: boolean

Boolean if the tooltip is using the dense spec. This will reduce the padding, margin and font size for the tooltip and is usually used for desktop displays.

Optional denseSpacing

denseSpacing?: string | number

The amount of spacing to use for a dense tooltip. This is the distance between the container element and the tooltip.

Optional describedBy

describedBy?: string

An optional aria-describedby DOM id string to merge with the returned aria-describedby string since it only exists when the tooltip is visible.

Optional disableAutoSpacing

disableAutoSpacing?: boolean

Since react-md provides mixins to automatically apply a dense spec through mixins via media queries, the dense spec might be applied in css instead of in JS. This component will actually check the current spacing amount that has been applied when the tooltip becomes visible.

If this behavior is not desired, you can enable this prop and it will only use the provided spacing or denseSpacing props based on the dense prop.

Note: This will be defaulted to true when the process.env.NODE_ENV === 'test' since test environments normally don't have a default window.getComputedStyle value that is not NaN which will display errors in your tests.

Optional disableHoverMode

disableHoverMode?: boolean

Boolean if the hover mode functionality should be disabled for this instance instead of inheriting the value from the HoverModeProvider.

Optional disableSwapping

disableSwapping?: boolean

Boolean if the auto-swapping behavior should be disabled. When this value is undefined, it'll be treated as true when the position prop is defined, otherwise false.

Optional disabled

disabled?: boolean

Boolean if the event handlers should no longer attempt to show a tooltip. This should be set to true when your component might not have a tooltip associated with it.

example

Real World Example

import type { ReactElement, ReactNode } from "react";
import { Button, ButtonProps } from "@react-md/button";
import { Tooltip, useTooltip } from "@react-md/tooltip":

export interface TooltippedButtonProps extends ButtonProps {
  id: string;
  tooltip?: ReactNode;
}

export function TooltippedButton({
  id,
  tooltip,
  children,
  onClick,
  onBlur,
  onFocus,
  onKeyDown,
  onMouseEnter,
  onMouseLeave,
  onTouchStart,
  onContextMenu,
  ...props
}: TooltippedButtonProps): ReactElement {
  const { elementProps, tooltipProps } = useTooltip({
    disabled: !tooltip,
    baseId: id,
    onClick,
    onBlur,
    onFocus,
    onKeyDown,
    onMouseEnter,
    onMouseLeave,
    onTouchStart,
    onContextMenu,
  });

  return (
    <>
      <Button {...props} {...elementProps}>
        {children}
      </Button>
      <Tooltip {...tooltipProps}>{tooltip}</Tooltip>
    </>
  );
}
defaultvalue

false

remarks

@since 5.1.0

Optional focusTime

focusTime?: number

The amount of time to wait (in ms) before showing the tooltip after a keyboard user has triggered a focus event. You probably won't ever need to change this value.

Optional onBlur

onBlur?: FocusEventHandler<E>

Optional onClick

onClick?: MouseEventHandler<E>

Optional onContextMenu

onContextMenu?: MouseEventHandler<E>

Optional onEnter

onEnter?: TransitionEnterHandler

This function will be called once the TransitionStage has been set to "enter".

see

TransitionEnterHandler

Optional onEntered

onEntered?: TransitionEnterHandler

This function will be called once the TransitionStage has been set to "entering".

see

TransitionEnterHandler

Optional onEntering

onEntering?: TransitionEnterHandler

This function will be called once the TransitionStage has been set to "enter".

see

TransitionEnterHandler

Optional onExit

onExit?: TransitionExitHandler

This function will be called once the TransitionStage has been set to "entered".

see

TransitionEnterHandler

Optional onExited

onExited?: TransitionExitHandler

This function will be called once the TransitionStage has been set to "exited".

see

TransitionExitHandler

Optional onExiting

onExiting?: TransitionExitHandler

This function will be called once the TransitionStage has been set to "exiting".

see

TransitionExitHandler

Optional onFocus

onFocus?: FocusEventHandler<E>

Optional onKeyDown

onKeyDown?: KeyboardEventHandler<E>

Optional onMouseEnter

onMouseEnter?: MouseEventHandler<E>

Optional onMouseLeave

onMouseLeave?: MouseEventHandler<E>

Optional onTouchStart

onTouchStart?: TouchEventHandler<E>

Optional position

position?: SimplePosition

An optional controlled position to use that will disable the functionality to determine the "best" position to render the tooltip within the viewport.

Optional spacing

spacing?: string | number

The amount of spacing to use for a non-dense tooltip. This is the distance between the container element and the tooltip.

Optional style

style?: CSSProperties

An optional style object to merge and override the generated fixed positioning styles.

Optional threshold

threshold?: number

This value should be between 0 and 1 and will be multiplied by either the viewport height or viewport width to determine the best position to render the tooltip based on available space within the viewport.

You probably won't ever really need to update this value.

Optional touchTime

touchTime?: number

The amount of time to wait (in ms) before showing the tooltip after triggering a touchstart event. You probably won't ever need to change this value.

The default time is about the same it takes to display the context menu with a "long touch" and cancel displaying the context menu.

Optional vhMargin

vhMargin?: number

This is the viewport height margin to use in the positioning calculation. This is just used so that the tooltip can be placed with some spacing between the top and bottom edges of the viewport if desired.

Optional vwMargin

vwMargin?: number

This is the viewport width margin to use in the positioning calculation. This is just used so that the tooltip can be placed with some spacing between the left and right edges of the viewport if desired.

Generated using TypeDoc