Antd apply tooltip on to the Collapse.Panel header section - reactjs

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


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>

Related

antd collapse.panel not re rendering

I have this collapse panel in antd.
<Collapse defaultActiveKey={[1]} onChange={onChange}>
<Panel header="Billing Details" key="2" forceRender>
<BillingPanel
invoiceCycleOptions={invoiceCycleOptions}
projectData={projectData}
payModelOptions={payModelOptions}
accTypeOptions={accTypeOptions}
onDateChange={onDateChange}
isEditMode={isEditMode}
isPopulated={isPopulated}
prjStartDate={prjStartDate}
/>
</Panel>
<Panel header="Other Details" key="3" forceRender>
<OtherDetailsPanel
csmOptions={csmOptions}
projectData={projectData}
csm={csm}
onPrimaryCsmSelect={onPrimaryCsmSelect}
accountantOptions={accountantOptions?.map(
(option) => option?.name
)}
isEditMode={isEditMode}
secondaryCsmoptions={secondaryCsmoptions}
setShow={setShow}
setDocument={setDocument}
show={show}
salesPersonOptions={salesPersonOptions}
setIsValidSize={setIsValidSize}
isValidSize={isValidSize}
leadSourceOptions={leadSourceOptions}
marketingChannelOptions={marketingChannelOptions}
activeBillingOptions={activeBillingOptions}
activeBilling={activeBilling}
form={form}
selectedCsm={selectedCsm}
primaryCsm={primaryCsm}
secondaryCsmList={secondaryCsmList}
/>
</Panel>
</Collapse>
when projectData changes, the panel with the header "Other Details" does not re render. I am getting updated projectData in this component but not in the OtherDetailsPanel component. Can anyone help me?

Can you add HTML to react-tippy tooltip

I want to add a to a react-tippy tooltip.
Is it possible?
I only get it to show [object Object]
Look at title bellow
<Tooltip
// title={this.renderTicks(idx, row)}
title={<div>
<h4>Hello</h4>
<span>This is a span</span>
</div>}
position="right"
trigger="click"
theme="light"
arrow="true"
arrowSize="big"
distance="3"
style={{fontSize:14}}
>
<div>Click Here</div>
</Tooltip>

I didn't use it before but reading the documentation said that you can use html props.
"Tooltip content. If you don't define html, the title will be used"
Something like this:
<Tooltip
html={(
<div>
<h4>Hello</h4>
<span>This is a span</span>
</div>
)}
>

OK seems easy enough
instead of title just use 'html'
<Tooltip
// title={this.renderTicks(idx, row)}
html={<div>
<h4>Hello</h4>
<span>This is a span</span>
</div>}
position="right"
trigger="click"
theme="light"
arrow="true"
arrowSize="big"
distance="3"
style={{fontSize:14}}
>
<div>Click Here</div>
</Tooltip>

how to expand only one collapse panel in ant-design

I'm using Ant-design collapse as accordian , my requirement is when I load page by default first panel should open, and also when I click on other panel whartever the panel is already open should close and only clicked panel should expand.Can someone please help me on this.
I'm using Ant-design collapse :
https://ant.design/components/collapse/
Regards,

You need to use 'accordion' and 'defaultActiveKey' properties. Something like:
import { Collapse } from 'antd';
const { Panel } = Collapse;
const text = `
A dog is a type of domesticated animal.
Known for its loyalty and faithfulness,
it can be found as a welcome guest in many households across the world.
`;
ReactDOM.render(
<Collapse accordion defaultActiveKey={['1']}>
<Panel header="This is panel header 1" key="1">
<p>{text}</p>
</Panel>
<Panel header="This is panel header 2" key="2">
<p>{text}</p>
</Panel>
<Panel header="This is panel header 3" key="3">
<p>{text}</p>
</Panel>
</Collapse>,
mountNode,
);

Change text color in Semantic UI button Component

I'm using Semantic UI to design a button component having animation. How can I change custom font color inside button?
Below is my code for the button:
https://codesandbox.io/s/interesting-yonath-7qvwl?file=/index.js

you can use inline styling
<div>
<Button color="google plus" animated="toggle">
<Button.Content style={{color: '#f1f2f3'}} visible href="#" secondary>
<Icon name="google plus" /> hi
</Button.Content>
<Button.Content style={{color: '#f1f2f3'}} hidden href="#">
Connect <Icon name="google plus" />
</Button.Content>
</Button>
</div>

antd dropdown is not closing on mouse leave

Using antd for adding an dropdown menu.Its not closing on mouse leave and click of an item inside dropdown.it remains open in the same place when page is scrolled.
<Dropdown className="buy-dropdown" overlay={menu} placement="topLeft" trigger={["click"] >
<Button className="cxe-buy-game-btn" >
<img src="/static/images/cart-buy.svg" /> Buy
</Button>
</Dropdown>

It's because you have mentioned click as trigger. remove this prop so default will be hover or add hover
<Dropdown className="buy-dropdown" overlay={menu} placement="topLeft" trigger={["hover"] >
<Button className="cxe-buy-game-btn" >
<img src="/static/images/cart-buy.svg" /> Buy
</Button>
</Dropdown>

Resources