50 lines
1.9 KiB
JavaScript
50 lines
1.9 KiB
JavaScript
import React from 'react';
|
|
import Button from '../../components/button';
|
|
import Input from '../../components/input';
|
|
import FontIcon from '../../components/font_icon';
|
|
import Tooltip, { tooltipFactory } from '../../components/tooltip';
|
|
import Chip from '../../components/chip';
|
|
import Avatar from '../../components/avatar';
|
|
|
|
const TooltipFontIcon = tooltipFactory({ passthrough: false })(FontIcon);
|
|
const TooltipButton = Tooltip(Button);
|
|
const TooltipInput = Tooltip(Input);
|
|
const TooltipStrong = Tooltip(({children, ...other}) => {
|
|
delete other.theme;
|
|
return <strong {...other}>{children}</strong>;
|
|
});
|
|
const TooltipStrongDirect = Tooltip('strong');
|
|
const ChipTooltip = Tooltip(Chip);
|
|
|
|
const TooltipTest = () => (
|
|
<section>
|
|
<h5>Tooltip</h5>
|
|
<p>Give information on :hover</p>
|
|
<TooltipButton label='Bookmark' icon='bookmark' raised primary tooltip='Bookmark Tooltip' tooltipDelay={1000} />
|
|
<TooltipButton icon='add' floating accent tooltip='Floating Tooltip' />
|
|
<TooltipButton icon='add' floating disabled tooltip='Floating can not be shown' />
|
|
<TooltipButton
|
|
icon='add'
|
|
floating
|
|
tooltip={<div><p>An example with</p><p>Multiline!</p></div>}
|
|
/>
|
|
<ChipTooltip tooltip='Dolor sit amet' tooltipPosition='top'>
|
|
<Avatar icon='home'/>
|
|
<span>Tooltip in a chip</span>
|
|
</ChipTooltip>
|
|
<TooltipInput tooltip='lorem ipsum...' />
|
|
<p>Lorem ipsum dolor sit amet, <TooltipStrong tooltip='This is a auto show tooltip'>consectetur</TooltipStrong> adipiscing elit.</p>
|
|
<p>
|
|
Click this next word to show and hide on click:
|
|
{' '}
|
|
<TooltipStrongDirect tooltip='This is a auto show tooltip' tooltipShowOnClick>
|
|
oh hai
|
|
</TooltipStrongDirect>
|
|
{' '}. This is useful for mobile!
|
|
</p>
|
|
<TooltipFontIcon value="code" tooltip="This is a test with FontIcon" />
|
|
</section>
|
|
);
|
|
|
|
export default TooltipTest;
|