39 lines
1.3 KiB
JavaScript
39 lines
1.3 KiB
JavaScript
import React from 'react';
|
|
import Button from '../../components/button';
|
|
import Input from '../../components/input';
|
|
import Tooltip from '../../components/tooltip';
|
|
|
|
const TooltipButton = Tooltip(Button);
|
|
const TooltipInput = Tooltip(Input);
|
|
const TooltipStrong = Tooltip(({children, ...other}) => {
|
|
delete other.theme;
|
|
return <strong {...other}>{children}</strong>;
|
|
});
|
|
|
|
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>}
|
|
/>
|
|
<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:
|
|
{' '}
|
|
<TooltipStrong tooltip='This is a auto show tooltip' tooltipShowOnClick>
|
|
oh hai
|
|
</TooltipStrong>
|
|
{' '}. This is useful for mobile!
|
|
</p>
|
|
</section>
|
|
);
|
|
|
|
export default TooltipTest;
|