@ftrack/react-toolbox/spec/components/tooltip.js

A set of React components implementing Google's Material Design specification with the power of CSS Modules.

import React from 'react';
import Button from '../../components/button';
import Input from '../../components/input';
import Tooltip from '../../components/tooltip';
import Chip from '../../components/chip';
import Avatar from '../../components/avatar';

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>
  </section>
);

export default TooltipTest;