-1

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

evolutionxbox
  • 3,932
  • 6
  • 34
  • 51
Brian Heiskaanen
  • 1
  • 1

2 Answers2

1

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

Huboh
  • 29
  • 4
0

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

Dharman
  • 30,962
  • 25
  • 85
  • 135
Count-Monte
  • 13
  • 2
  • 5