ConditionalTooltip - Admin Components

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
1import {2  ConditionalTooltip,3} from "@medusajs/dashboard/components"

Example#

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

Code
1import { defineWidgetConfig } from "@medusajs/admin-sdk"2import {3  ConditionalTooltip,4} from "@medusajs/dashboard/components"5import { Container, Text } from "@medusajs/ui"6
7const ProductTitleWidget = () => {8  const title = "A very long product title"9
10  return (11    <Container>12      <ConditionalTooltip13        content={title}14        showTooltip={title.length > 20}15      >16        <Text className="truncate">{title}</Text>17      </ConditionalTooltip>18    </Container>19  )20}21
22export const config = defineWidgetConfig({23  zone: "product.details.before",24})25
26export default ProductTitleWidget

Props#

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