does anybody know an easy way to add tooltips(while using React Codegen)?
Hey @still_peacock
I used react-tooltip
package in one of my project. Following is the code for PlasmicWrapperComponent
import * as React from 'react';
import { PlasmicTooltip } from './plasmic-remote/admin_dashboard/PlasmicTooltip';
import ReactTooltip from 'react-tooltip';
function Tooltip_({ id, ...props }, ref) {
return (
<React.Fragment>
<div data-tip data-for={id}>
{props.children}
</div>
<ReactTooltip id={id} backgroundColor={'#ffffff00'} effect="solid">
<PlasmicTooltip root={{ ref }} {...props} children={props.content} />
</ReactTooltip>
</React.Fragment>
);
}
const Tooltip = React.forwardRef(Tooltip_);
export default Tooltip;
Following is how it can be utilzed. It shows tooltip when we hover over the informationIconWrapper element.
informationIconWrapper={{
wrapChildren: (children) => (
<Tooltip id="provide-unique-id-here" content={"This content goes into the tooltip"}>
{children}
</Tooltip>
),
}}
children
prop is the one on which the tooltip should display on hover.
content
prop lets us define the content of the tooltip.
oh that’s great! I’ma try this right now.
@zonal_mammal I’m a bit confused about this import
import { PlasmicTooltip } from './plasmic-remote/admin_dashboard/PlasmicTooltip';
what is plasmic-remote?
Currently, away. I will share the details about it. It’s a simple Vertical Box added in Plasmic Studio.
plasmic-remote
is the name of folder where the Plasmic Studio components get synced. By default it’s name is plasmic
I got it to work. Thanks for the help