CODEWITHSUNDEEP
reactjstooltippanelantd
Dilshan Harshana
Dilshan Harshana

Reputation: 137

Antd apply tooltip on to the Collapse.Panel header section

I'm trying to add a tooltip on top of the panel header. The issue is that when I add Tooltip inside panel item it appears for the panel content not for its header.

<Collapse>
    <Panel
      header="Header"
      key="1"
      id="1"
    >
      <Tooltip
        title="Panel View 1"
        className="tooltip"
      >
        <div>
          <Paragraph>
            Sample Text
          <Paragraph/>
        </div>
      </Tooltip>
    </Panel>         
</Collapse>

Expected view

enter image description here

Upvotes: 0

Views: 581

Answers (1)

Fatemeh Qasemkhani
Fatemeh Qasemkhani

Reputation: 2042

You need to add it to header props:

<Collapse>
    <Panel
      header={
        <Tooltip
          title="Panel View 1"
          className="tooltip"
        >
            This is panel header 1
        </Tooltip>
      }
    >
      <p>{text}</p>
    </Panel>        
</Collapse>

Upvotes: 1

Related Questions