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.
Example#
Show a tooltip on a product's title only when the title is too long to fit:
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:
Loading...
Was this page helpful?