'data-tooltip returns [Object object]

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
      class="material-icons tooltipped"
      data-tooltip={translate("ResizeImageInfo")}
    >
    info
</span>

enter image description here

javascripthtmlreactjswebjsx


Solution 1:[1]

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

Solution 2:[2]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Huboh
Solution 2 Dharman

Related Questions