How to get data into my tooltip from a map?-CodePudding

I am using react tooltip, but I'm not sure how to get the data in my tooltip.

I would like the topline and bottomline consts to go in the tooltip.

Can anybody point me in the right direction?

export const SmallCalendar = ({ events }) => {
  const mapToRender = events?.map((e) => {
    const topLine = (
      <strong>
        {e.Title} - {e.start.slice(0, -9)}
      </strong>
    );
    const bottomLine = (
      <Fragment>
        <strong>Applies to</strong>: {e.AppliesTo.join(", ")}
      </Fragment>
    );
    return (
        <div
          className={styles.eventContainer}
          data-for="registerTip"
          data-tip={e}
        >
          <div>
            <div className={styles.eventContainerDate}>
              <Moment format="MMM" className={styles.month}>
                {e.start}
              </Moment>
              <Moment format="DD" className={styles.eventContainerLarge}>
                {e.start}
              </Moment>
            </div>
            }
          </div>
        </div>
    );
  });

  return (
    <div>
      {mapToRender}
      <ReactTooltip id="registerTip" place="top" effect="solid">
        <p>Yo</p>
      </ReactTooltip>
    </div>
  );
};

CodePudding user response：

You can topline and bottomline consts pass to data-tip and add data-html={true}. Also change your consts like this:

const topLine = `<strong>${e.Title} - ${e.start.slice(0, -9)}</strong>`;

const bottomLine = `<Fragment><strong>Applies to</strong>: ${e.AppliesTo.join(", ")}</Fragment>`