Slot

Converts a primitive part into a slot.

Features

  • Can be passed into the `as` prop of any primitive part to convert it to a slottable area.

Install the component from your command line.

npm install @radix-ui/react-slot

Import the component.

import { Slot } from '@radix-ui/react-slot';
export default () => (
<Slot>
<div>Hello</div>
</Slot>
);

Uses the as prop to convert the tooltip trigger into a slottable area. It will render the button passed as children for the trigger.

// your-tooltip.jsx
import React from 'react';
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
import { Slot } from '@radix-ui/react-slot';
function Tooltip({ children, content, open, defaultOpen, onOpenChange, ...props }) {
return (
<TooltipPrimitive.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange} >
<TooltipPrimitive.Trigger as={Slot}>
{children}
</TooltipPrimitive.Trigger>
<TooltipPrimitive.Content side="top" align="center" {...props}>
{content}
<TooltipPrimitive.Arrow offset={5} width={11} height={5} />
</TooltipPrimitive.Content>
</TooltipPrimitive.Root>
);
}
import { Tooltip } from './your-tooltip';
export default () => (
<Tooltip content="Tooltip content">
<button>Tooltip trigger</button>
</Tooltip>
);