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
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?
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>
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,
);
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>
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>