data-tooltip returns [Object object]-CodePudding

When displaying text in data-tooltip, the inscription [Object object] is displayed

import React from "react";
import { FormattedMessage } from "react-intl";

const translate = (id, value={}) => <FormattedMessage id={id} values={{...value}} />

export default translate;

<span>
  {translate("resizeImage")}
    <span
      
      data-tooltip={translate("ResizeImageInfo")}
    >
    info
</span>

enter image description here

CodePudding user response：

Seems like your translate("ResizeImageInfo") function return an object instead of a string

CodePudding user response：

data-tooltip attribute only works with string. https://www.thesitewizard.com/html-tutorial/how-to-insert-tooltips.shtml

but your translate function returns React component. As a result it only shows [Object, object].

To implement tooltip feature in react please consider using this. https://www.npmjs.com/package/react-tooltip Or please consider implement this. tooltip div with ReactJS