Anyone have an easy way to add tooltips using codegen?

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.

Please let me know if you have any questions.

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 :slight_smile: