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>
Related
I'm trying to dynamically add PivotItems to a Fabric UI Pivot.
return (
<div>
<PrimaryButton style={{margin:5 }} onClick={addItem}>
Add
</PrimaryButton>
<Pivot aria-label="My Items">
{items.map((item)=>{
return (
<div key={uniqueId}>
<PivotItem headerText="test">
Test
</PivotItem>
</div>)
})}
</Pivot>
</div>
)
but the items are not rendering.
When I remove all the Pivot/item-stuff and just print out some text it works fine...
ok I finally found the issue here.
Inside the map-function I used
<div key...
but this code is inside a <pivot> which allows only <PivotItem> as childs...
so I fixed it like this and it works:
return (
<div>
<PrimaryButton style={{margin:5 }} onClick={addItem}>
Add
</PrimaryButton>
<Pivot aria-label="My Items">
{items.map((item)=>{
return (
<PivotItem headerText="test" key={uniqueId}>
Test
</PivotItem>
)
})}
</Pivot>
</div>
)
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>
I've implemented the material-ui react tabs as follows
<Tabs onChange={(value) => props.changeTabListener(value)} value={props.currentTab} style={styles.tabs}>
<Tab label="Tab 1" value={props.candidatesTab}>
<div style={props.currentTab == 0 ? {display:'inline'} : {display:'none'}}>
<WorksheetTableContainer/>
<div style={fabStyle}>
<FloatingActionButton style={iconPadding}>
<ContentClear/>
</FloatingActionButton>
<FloatingActionButton style={iconPadding}>
<ModeEdit/>
</FloatingActionButton>
<FloatingActionButton style={iconPadding}>
<ContentSave />
</FloatingActionButton>
<FloatingActionButton >
<ArrowForward />
</FloatingActionButton>
</div>
</div>
</Tab>
<Tab label="Tab 2" value={props.savedTakesTab}>
<div style={props.currentTab == 1 ? {display:'inline'} : {display:'none'}}>
<WorksheetTableContainer/>
<div style={fabStyle}>
<FloatingActionButton >
<ArrowForward />
</FloatingActionButton>
</div>
</div>
</Tab>
</Tabs>
Which works for material-ui components. However, the WorksheetTableComponent stacks itself on the first tab. Ie:
How can I have the content be on two separate tabs?
Thanks
The error is occurring since Tab isn't programmed to handle children like that. Fortunately, the Tab label property accepts a node, so you could even pass the desired child that way:
<Tab
value={props.savedTakesTab}
label={
<div style={props.currentTab == 1 ? {display:'inline'} : {display:'none'}}>
<WorksheetTableContainer/>
<div style={fabStyle}>
<FloatingActionButton >
<ArrowForward />
</FloatingActionButton>
</div>
</div>
}
/>
If you still wanted the Tab2 label, you can simply set it within the child node. Hope that helps.
is it possible to have MenuItem inside Popover component and still retain style. Right now I get menuitem (without style), when I just use MenuItem component. When I wrap it inside , nothing get visible.
<Overlay
show={this.state.isOpen}
target={this.state.target}
placement="bottom"
container={this}
>
<Popover
id="profilePopover"
title={`Hello ${givenName || ''}${surname || ''}`}
>
<strong>Holy guacamole!</strong> Check this info.
<Clearfix>
<ul className="dropdown-menu open">
<MenuItem>link</MenuItem>
</ul>
</Clearfix>
</Popover>
</Overlay>
You are returning more than 1 item inside the popover class.
<Overlay
show={this.state.isOpen}
target={this.state.target}
placement="bottom"
container={this}
>
<Popover
id="profilePopover"
title={`Hello ${givenName || ''}${surname || ''}`}
>
{
<div>
<strong>Holy guacamole!</strong> Check this info.
<Clearfix>
<ul className="dropdown-menu open" style={{display:"block", position: "relative"}}>
<MenuItem>Test</MenuItem>
<MenuItem>Test2</MenuItem>
</ul>
</Clearfix> </div> }
</Popover>
</Overlay>
and it got something to do with the classname "dropdown-menu open" try add a style in it
Thanks guys, I created custom popover element, and threw some custom .css, and I can see menuItem inside popover. Though I am yet to correct arrowOffset values and top alignment not working... separate question for them.
<Overlay
show={this.state.isOpen}
target={this.state.target}
container={this}
placement="bottom"
arrowOffsetTop="-6px;"
arrowOffsetLeft="79%;"
>
<PopoverAligned
links={links}
givenName={givenName}
surname={surname}
greetingText={greetingText}
/>
</Overlay>
const PopoverAligned = props => (
<Popover
id="profilePopover"
title={`${props.greetingText} ${props.givenName || ''} ${props.surname || ''}`}
className="dropdown-menu open"
placement="bottom"
style={{ top: '43px;', left: '-100px' }}
>
{
props.links.map(link => (
<li className="menuitem">
<a href={link.url} target={link.target} className="dropdown-link">
{link.title}
</a>
</li>
))
}
</Popover>
);
I'm using React-Bootstrap Popover. I would like the popover to close once a user clicks on a close button located inside the popover. I would prefer a solution that doesn't use refs as facebook doesn't recommend using them. Here is my code
const popoverTop = (
<Popover id="popover-positioned-top" title="Popover top">
<button type="button" className="close">×</button>
<strong>Holy guacamole!</strong> Check this info.
</Popover>
);
<OverlayTrigger trigger="click" placement="top" overlay={popoverTop}>
<Button>Holy guacamole!</Button>
</OverlayTrigger>
Here is what helped me :
<OverlayTrigger
container={this}
trigger="click"
placement="right"
overlay={this.popoverClick}
rootClose={true}
>
<Button aria-label="Get Info" bsSize="medium">
Button Name
</Button>
</OverlayTrigger>
where popoverClick is:
<Popover id="popover-positioned-scrolling-right" className="popover-main">
<div className="popover-custom-header">
<h3 className="popover-title">Your Title</h3>
<IconButton aria-label="Close" className="icon-button"
onClick={() => document.body.click()}>
<Close fontSize="small"/>
</IconButton>
</div>
<div class="popover-custom-content">
{/* ... the content you need */}
</div>
</Popover>
document.body.click() -> does all the work.
Ref: https://stackoverflow.com/a/47636953/9743227
I hope it will help you, too!
I know that a lot of time has passed, today I had this same problem and I arrived here. I found a way to fix it.
<OverlayTrigger trigger = 'your-trigger' placement = 'auto' rootClose
ref = 'overlay'>
<Popover title='' >
------
</Popover>
<Button onClick={ this.hidePopover } ></Button>
</OverlayTrigger>
then in the method
hidePopover = ( ) =>
{
this.refs.overlay.handleHide();
}
I hope I have helped