ConditionalTooltip - Admin Components

Note: This component is available since Medusa v2.21.0.

The ConditionalTooltip component wraps its children in a Tooltip only when a condition is met, and renders them unchanged otherwise. The Medusa Admin uses it for elements whose tooltip is only useful in some states, such as truncated table cells and disabled action menu items.

Code
import {
  ConditionalTooltip,
} from "@medusajs/dashboard/components"

Example#

Show a tooltip on a product's title only when the title is too long to fit:

Code
import { defineWidgetConfig } from "@medusajs/admin-sdk"
import {
  ConditionalTooltip,
} from "@medusajs/dashboard/components"
import { Container, Text } from "@medusajs/ui"

const ProductTitleWidget = () => {
  const title = "A very long product title"

  return (
    <Container>
      <ConditionalTooltip
        content={title}
        showTooltip={title.length > 20}
      >
        <Text className="truncate">{title}</Text>
      </ConditionalTooltip>
    </Container>
  )
}

export const config = defineWidgetConfig({
  zone: "product.details.before",
})

export default ProductTitleWidget

Props#

The component accepts all props of the Tooltip component from Medusa UI, in addition to the following prop:

showTooltipbooleanOptional

Whether to wrap the children in a tooltip. When false, the children render without a tooltip.

Default: false

childrenReact.ReactNode

The element that the tooltip is shown for.

contentReact.ReactNode

The tooltip's content. This prop is passed to the underlying Tooltip component.

Found a problem with this page?Report Issue

Edited Nov 14·Edit this page