I am trying to use the Material-UI Tooltip component on a component which already has the title property. I must use the child with the title prop. Is there any way I can use the Material-UI tooltip, or do I need to find another?

<Tooltip title='Disabled' aria-label='disabled button'>
  <RequiredImportedButton title={this._getTitleMessage()} />
</Tooltip>

Material-UI throws this error:

index.js:2178 Warning: Material-UI: you have provided a title property to the child of <Tooltip />. Remove this title property Delete or the Tooltip component.

Thanks for any help you may have.

I am trying to use the Material-UI Tooltip component on a component which already has the title property. I must use the child with the title prop. Is there any way I can use the Material-UI tooltip, or do I need to find another?

<Tooltip title='Disabled' aria-label='disabled button'>
  <RequiredImportedButton title={this._getTitleMessage()} />
</Tooltip>

Material-UI throws this error:

index.js:2178 Warning: Material-UI: you have provided a title property to the child of <Tooltip />. Remove this title property Delete or the Tooltip component.

Thanks for any help you may have.

• javascript
• reactjs
• material-ui

• 2 Can you explain your scenario a little more? What is the text returned by this._getTitleMessage()? Why would the button have a title with different text than the tooltip? – Ryan Cogswell Commented May 17, 2019 at 14:33

5 Answers 5

Go with the simple approach: wrap the child component in a div.

<Tooltip title='Disabled' aria-label='disabled button'>
  <div>
    <RequiredImportedButton title={this._getTitleMessage()} />
  </div>
</Tooltip>

UPDATE:

Another answer suggested the use of a fragment instead of a div, as divs can cause unintended styling changes, but there was confusion over how to implement this.

<Tooltip title='Disabled' aria-label='disabled button'>
  <>
    <RequiredImportedButton title={this._getTitleMessage()} />
  </>
</Tooltip>

You can choose another name for the propery and pass it to the title's property of the button in the RequiredImportedButton component :

<Tooltip title='Disabled' aria-label='disabled button'>
  <RequiredImportedButton bTitle={this._getTitleMessage()} />
</Tooltip>

// RequiredImportedButton.js
function RequiredImportedButton(props) {
 const { bTitle} = props;

 ...

 return (<button title={bTitle}>My button</button>);
}

DIV works fine but sometimes we may experience some design issues, so better wrap up in fragmentation tag, for example <>{props.children}</>

RequiredImportedButton probably sets the HTML title attribute. However, it should not do so if it's not for tooltip purposes. See MDN doc:

The HTMLElement.title property represents the title of the element: the text usually displayed in a 'tooltip' popup when the mouse is over the node.

The proper fix would be to prevent RequiredImportedButton from setting title attributes. If it's from a third-party, you can report a bug.

Some other answers suggest wrapping the child with either fragments or <div>. But they may break something: My experiments showed that wrapping with fragments would stop the tooltip from appearing and wrapping with <div> may potentially break styling.

My solution was to remove the title attribute from the child component and replace it by aria-label. In my case I was using component from Material-UI, so I really didn't need a "title", jut an aria-label did the trick.