How can I put the action of CardHeader right beside the title?

user_15157684 0
Viewed 607

I have this card title where it is in the middle of it. And the IconButton was located at the right edge of the screen. How can I put the IconButton right beside the title?

Currently, it looks like this: enter image description here

below are the codes:

<CardHeader
        title="List of Items"
        action={
          <Tooltip
            title={<h3>.....</h3>}
          >
            <IconButton aria-label="help" color="primary">
              <HelpIcon />
            </IconButton>
          </Tooltip>
        }
      />
material-ui reactjs
2 Answers

Since title is a node

function Title() {
  return (
    <div>
      List of Items
      <Tooltip title={<h3>.....</h3>}>
        <IconButton aria-label="help" color="primary">
          <HelpIcon />
        </IconButton>
      </Tooltip>
    </div>
  );
}

<CardHeader title={<Title />} />

Edit beautiful-booth-koucx

user_32123790

Assuming that CardHeader is your component and not 3rd party library:

  1. If CardHeader accepts title as string prop, then you should go into CardHeader itself to have tooltip accepted via props
  2. If CardHeader accepts ReactElement then you can construct title within this component where header is used and pass it down
  3. Extend CardHeader so it has tooltip text accepted via props and conditionally render it (if that prop is passed to it)

Assuming that it comes from material-ui. It already accepts title as node, so you should be able to do:

<CardHeader
        title={<>
          "List of Items"
          <Tooltip
            title={<h3>.....</h3>}
          >
            <IconButton aria-label="help" color="primary">
              <HelpIcon />
            </IconButton>
          </Tooltip>
        </>
        }
      />
user_42051920
Related