How do I set multiple lines to my tooltip text for Material UI IconButton?

Question

You can put any element you want inside of tooltip, not just text:

<IconButton
  tooltip={<div>First Line<br />Second Line</div>}
  tooltipPosition="top-center">
  <FontIcon
    className="material-icons">
    info_outline
  </FontIcon>
</IconButton>

If you’re not sure how long the tooltip will be and you want to force line breaks, you can use set the width of the div and force word wrapping (you can also force text align to the left in you don’t want it centered):

<IconButton
  tooltip={
    <div style={{ width: 100, whiteSpace: 'normal', textAlign: 'left' }}>This is a very long tooltip</div>
  }
  tooltipPosition="top-center">
  <FontIcon
    className="material-icons">
    info_outline
  </FontIcon>
</IconButton>

Leave a Comment Cancel reply