Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface TooltipProps

Tooltip terms
  • target - Refers to the tooltip target, the element that is hovered, clicked, etc. to trigger the tooltip to show.
  • content - Refers to the content inside the tooltip itself.
  • anchor - Currently refers to the tooltip target, but may be extended to eventually allow explicitly passing an anchor element that will be used by position
  • anchorPoint - The corner of the tooltip content that will be used to anchor the tooltip. If the tooltip content should go down and right (the default), the anchor point will be the top left corner of the tooltip content. If the tooltip content should grow up instead of down, the anchor point would be the tooltip content's bottom left corner instead.

Hierarchy

  • TooltipProps

Index

Properties

Methods

Properties

Optional blockBackground

blockBackground?: boolean

Stops all interactions with content in the background/under the tooltip. The tooltip must first be closed before being able to interact with other elements again.

children

children: ReactNode | TooltipRenderProps

The tooltip target

Optional className

className?: string

styles for element wrapping the children

Optional closeDelay

closeDelay?: number

Delay hiding the tooltip for [delay] millisenconds.

Optional closeOn

closeOn?: null | "hover" | "click"

Determines whether the component will automatically manage closing the tooltip.

  • hover - Will automatically add an onMouseLeave handler to the the tooltip target to hide the tooltip when the mouse leaves the target and content.
  • click - Will automatically add a click handler to the tooltip target to hide the tooltip on click outside of target or content.
  • null - Will not set up any hide behavior automatically, use the hideTooltip render arg to control this behavior.

content

content: ReactNode | TooltipRenderProps

The tooltip content

Optional disabled

disabled?: boolean

Disable the tooltip

Optional matchWidth

matchWidth?: boolean

Force the tooltip content to match the width of the target element.

This is useful for dropdowns/autocompletes where you want the tooltip content to automatically just match the input width.

Optional modal

modal?: boolean

Block all elements behind the tooltip so they can't be interacted with

Optional grow

grow?: "down-right" | "down-left" | "up-right" | "up-left"

Which direction the tooltip content should grow.

  • down-right - [default] The tooltip content grows down and to the right as as content is added. This will set the anchorPoint to the top left corner of the tooltip content.
  • down-left - The tooltip content grows down and to the left as as content is added. This will set the anchorPoint to the top right corner of the tooltip content.
  • up-right - The tooltip content grows upt and to the right as as content is added. This will set the anchorPoint to the bottom left corner of the tooltip content.
  • up-left - The tooltip content grows up and to the left as as content is added. This will set the anchorPoint to the bottom right corner of the tooltip content.

Optional hideOnDocumentScroll

hideOnDocumentScroll?: boolean

Hide tooltip when the document scrolls

Optional openDelay

openDelay?: number

Delay showing the tooltip for [delay] millisenconds.

Optional openOn

openOn?: null | "hover" | "click"

Determines whether the component will automatically manage opening the tooltip.

  • hover - Will automatically add an onMouseEnter handler to the the tooltip target to show the tooltip on hover.
  • click - Will automatically add a click handler to the tooltip target to show the tooltip on click.
  • null - Will not set up any show behavior automatically, use the showTooltip render arg to control this behavior.

Optional position

position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"

Determines the tooltip content position. If a position is set, the tooltip content's top left corner will be positioned at the specified anchor. Use xOffset/yOffset to control position from there.

  • null - Will use the client X and Y offset from the event that triggered the tooltip to show. In most cases this will be the mouse position when it hovers over or clicks on an element.

  • top-left - The tooltip content's anchorPoint will be placed at the target's top left corner.

  • top-right - The tooltip content's anchorPoint will be placed at the target's top right corner.

  • bottom-left - The tooltip content's anchorPoint will be placed at the target's bottom left corner.

  • bottom-right - The tooltip content's anchorPoint will be placed at the target's bottom right corner.

Optional xOffset

xOffset?: number

After determining the base position of the tooltip content using anchor, this value will be added to the x position.

Optional yOffset

yOffset?: number

After determining the base position of the tooltip content using anchor, this value will be added to the y position.

Methods

Optional onClose

  • onClose(): void

Optional onOpen

  • onOpen(): void

Generated using TypeDoc