Options
All
  • Public
  • Public/Protected
  • All
Menu

Module @react-md/tooltip

Index

Interfaces

Type aliases

Variables

Functions

Type aliases

ChildrenRenderer

ChildrenRenderer: (props: TooltippedProvidedProps) => ReactElement

Type declaration

    • (props: TooltippedProvidedProps): ReactElement

    • Parameters

      • props: TooltippedProvidedProps

      Returns ReactElement

TooltipHookProvidedTooltipProps

TooltipHookProvidedTooltipProps: Pick<TooltipProps, "style"> & Required<FixedPositioningTransitionCallbacks> & Required<Pick<TooltipProps, "id" | "dense" | "position" | "visible">> & { ref: Ref<HTMLSpanElement> }

The props that will be created from the useTooltip hook that should be passed to the Tooltip component to work correctly.

remarks

@since 2.8.0

TooltipInitiatedBy

TooltipInitiatedBy: UserInteractionMode | null
internal
remarks

@since 2.8.0

TooltipKeyboardEventHandlers

TooltipKeyboardEventHandlers<E>: Pick<HTMLAttributes<E>, "onBlur" | "onFocus" | "onKeyDown">
remarks

@since 2.8.0

Type parameters

  • E: HTMLElement

TooltipPositionHookReturnValue

TooltipPositionHookReturnValue: [SimplePosition, UpdateTooltipPosition]
internal
remarks

@since 2.8.0

TooltipTouchEventHandlers

TooltipTouchEventHandlers<E>: Pick<HTMLAttributes<E>, "onTouchStart" | "onContextMenu">
remarks

@since 2.8.0

Type parameters

  • E: HTMLElement

TooltippedElementEventHandlers

TooltippedElementEventHandlers<E>: TooltipTouchEventHandlers<E> & TooltipKeyboardEventHandlers<E> & Pick<HTMLAttributes<E>, keyof HoverModeEventHandlers>

These are all the event handlers that are required to control the visibility of a tooltip-like element.

remarks

@since 2.8.0

Type parameters

  • E: HTMLElement

UpdateTooltipPosition

UpdateTooltipPosition: (container: HTMLElement) => void

Type declaration

    • (container: HTMLElement): void
    • internal
      remarks

      @since 2.8.0

      Parameters

      • container: HTMLElement

      Returns void

Variables

Const DEFAULT_TOOLTIP_CLASSNAMES

DEFAULT_TOOLTIP_CLASSNAMES: Readonly<CSSTransitionClassNames> = ...
remarks

@since 2.0.0

Const DEFAULT_TOOLTIP_DELAY

DEFAULT_TOOLTIP_DELAY: 1000 = 1000
remarks

@since 2.0.0

Const DEFAULT_TOOLTIP_DENSE_SPACING

DEFAULT_TOOLTIP_DENSE_SPACING: "0.875rem" = "0.875rem"
remarks

@since 2.8.0

Const DEFAULT_TOOLTIP_MARGIN

DEFAULT_TOOLTIP_MARGIN: 16 = 16
remarks

@since 2.8.0

Const DEFAULT_TOOLTIP_POSITION

DEFAULT_TOOLTIP_POSITION: "below" = "below"
remarks

@since 2.8.0

Const DEFAULT_TOOLTIP_SPACING

DEFAULT_TOOLTIP_SPACING: "1.5rem" = "1.5rem"
remarks

@since 2.8.0

Const DEFAULT_TOOLTIP_THRESHOLD

DEFAULT_TOOLTIP_THRESHOLD: 0.75 = 0.75
remarks

@since 2.0.0

Const DEFAULT_TOOLTIP_TIMEOUT

DEFAULT_TOOLTIP_TIMEOUT: Readonly<TransitionTimeout> = ...
remarks

@since 2.0.0

Const TOOLTIP_SPACING_VAR

TOOLTIP_SPACING_VAR: "--rmd-tooltip-spacing" = "--rmd-tooltip-spacing"
internal
remarks

@since 2.8.0

Const Tooltip

Tooltip: ForwardRefExoticComponent<TooltipProps & RefAttributes<HTMLSpanElement>> = ...

This is the base tooltip component that can only be used to render a tooltip with an animation when the visibility changes. If this component is used, you will need to manually add all the event listeners and triggers to change the visible prop.

example

Simple Usage

import { Button } from "@react-md/button";
import { useTooltip, Tooltip } from "@react-md/tooltip";

function Example() {
  const { tooltipProps, elementProps } = useTooltip({
    baseId: 'my-element',
  });

  return (
    <>
      <Button {...elementProps}>Button</Button>
      <Tooltip {...tooltipProps}>
        Tooltip Content
      </Tooltip>
    </>
  );
}

Functions

Tooltipped

  • The Tooltipped component can be used to dynamically add a tooltip to child element by cloning the required event handlers and accessibility props into the child with React.cloneChild.

    Note: This component is kind of deprecated in favor of using the useTooltip hook and Tooltip component instead.

    see

    Tooltip for an example

    Parameters

    Returns ReactElement

useTooltip

  • This hook is used to handle the positioning and visibility of the tooltip component mostly within the Tooltipped component.

    example

    Simple Usage

    import { Button } from "@react-md/button";
    import { useTooltip, Tooltip } from "@react-md/tooltip";

    function Example() {
      const { tooltipProps, elementProps } = useTooltip({
        baseId: 'my-element',
      });

      return (
        <>
          <Button {...elementProps}>Button</Button>
          <Tooltip {...tooltipProps}>
            Tooltip Content
          </Tooltip>
        </>
      );
    }
    remarks

    @since 2.8.0

    Type parameters

    • E: HTMLElement

    Parameters

    Returns TooltipHookReturnValue<E>

useTooltipPosition

Generated using TypeDoc