How to use the react-md/lib/Tooltips function in react-md

import * as React from 'react';
import FontIcon from 'react-md/lib/FontIcons';
import injectTooltip from 'react-md/lib/Tooltips';

// Material icons shouldn't have any other children other than the child string and
// it gets converted into a span if the tooltip is added, so we add a container
// around the two.
const TooltipFontIcon = injectTooltip(({
  children, iconClassName, className, tooltip, forceIconFontSize, forceIconSize, style, iconStyle, ...props }) => (

  <div style="{style}">
    {tooltip}
    
      {children}
    
  </div>
));

TooltipFontIcon.propTypes = {

import React, { PropTypes } from 'react';
import classnames from 'classnames';
import FontIcon from 'react-md/lib/FontIcons';
import injectTooltip from 'react-md/lib/Tooltips';

// Material icons shouldn't have any other children other than the child string and
// it gets converted into a span if the tooltip is added, so we add a container
// around the two.
const TooltipFontIcon = injectTooltip(({ children, iconClassName, className, tooltip, ...props }) => (
  <div>
    {tooltip}
    {children}
  </div>
));

TooltipFontIcon.propTypes = {
  children: PropTypes.string.isRequired,
  className: PropTypes.string,
  iconClassName: PropTypes.string,
  tooltip: PropTypes.node,
};

export default TooltipFontIcon;

import React, { PropTypes } from 'react';
import classnames from 'classnames';
import FontIcon from 'react-md/lib/FontIcons';
import injectTooltip from 'react-md/lib/Tooltips';

// Material icons shouldn't have any other children other than the child string and
// it gets converted into a span if the tooltip is added, so we add a container
// around the two.
const TooltipFontIcon = injectTooltip(({ children, iconClassName, className, ...props }) => (
  <div>
    {children}
  </div>
));

TooltipFontIcon.propTypes = {
  children: PropTypes.string.isRequired,
  className: PropTypes.string,
  iconClassName: PropTypes.string,
};

export default TooltipFontIcon;

const styles = {
  tooltipContainer: {
    position: 'relative',
    display: 'inline-block',
    margin: '1em',
  },
};

const TooltipFontIcon = injectTooltip(({ children, iconClassName, tooltip }) => (
  <div style="{styles.tooltipContainer}">
    {tooltip}
    {children}
  </div>
));

const TooltipLink = injectTooltip(({ children, tooltip }) =&gt; (
  <a style="{styles.tooltipContainer}">
    {tooltip}
    {children}
  </a>
));

const CustomExamples = () =&gt; (
  <section>
    <p>Any component can be composed with the tooltip. Here is are some with the FontIcons.</p>
    print
    print
    print
    print
    <p>
      Tooltips will not appear on a composed component if the tooltipLabel is not specified.
      Here are some examples of a link.</p></section>

import React, { PropTypes } from 'react';
import classnames from 'classnames';

import injectTooltip from 'react-md/lib/Tooltips';

const TooltipLink = injectTooltip(({ children, className, ...props }) => (
  <a>
    {children}
  </a>
));

TooltipLink.propTypes = {
  className: PropTypes.string,
  children: PropTypes.node,
  href: PropTypes.string.isRequired,
};

export default TooltipLink;

import React from 'react';
import FontIcon from 'react-md/lib/FontIcons';
import injectTooltip from 'react-md/lib/Tooltips';

const styles = {
  tooltipContainer: {
    position: 'relative',
    display: 'inline-block',
    margin: '1em',
  },
};

const TooltipFontIcon = injectTooltip(({ children, iconClassName, tooltip }) => (
  <div style="{styles.tooltipContainer}">
    {tooltip}
    {children}
  </div>
));

const TooltipLink = injectTooltip(({ children, tooltip }) =&gt; (
  <a style="{styles.tooltipContainer}">
    {tooltip}
    {children}
  </a>
));

const CustomExamples = () =&gt; (
  <section>
    <p>Any component can be composed with the tooltip. Here is are some with the FontIcons.</p></section>

import * as React from 'react';
import injectTooltip from 'react-md/lib/Tooltips';

const Tooltip = injectTooltip(
  ({children, className, tooltip, ...props }) => (
  <div style="{{position:">
    {tooltip}
    {children}
  </div>
));

Tooltip.propTypes = {
  children: React.PropTypes.node,
  className: React.PropTypes.string,
  tooltip: React.PropTypes.node,
};

export default Tooltip;

import React, { PropTypes } from 'react';
import classnames from 'classnames';

import injectTooltip from 'react-md/lib/Tooltips';

const TooltipLink = injectTooltip(({ children, className, tooltip, ...props }) => (
  <a>
    {tooltip}
    {children}
  </a>
));

TooltipLink.propTypes = {
  tooltip: PropTypes.node,
  className: PropTypes.string,
  children: PropTypes.node,
  href: PropTypes.string.isRequired,
};

const styles = {
  tooltipContainer: {
    position: 'relative',
    display: 'inline-block',
    margin: '1em',
  },
};

const TooltipFontIcon = injectTooltip(({ children, iconClassName, tooltip }) => (
  <div style="{styles.tooltipContainer}">
    {tooltip}
    {children}
  </div>
));

const TooltipLink = injectTooltip(({ children, tooltip }) =&gt; (
  <a style="{styles.tooltipContainer}">
    {tooltip}
    {children}
  </a>
));

const CustomExamples = () =&gt; (
  <section>
    <p>Any component can be composed with the tooltip. Here is are some with the FontIcons.</p>
    print
    print
    print
    print
    <p>
      Tooltips will not appear on a composed component if the tooltipLabel is not specified.
      Here are some examples of a link.</p></section>

import React from 'react';
import FontIcon from 'react-md/lib/FontIcons';
import injectTooltip from 'react-md/lib/Tooltips';

const styles = {
  tooltipContainer: {
    position: 'relative',
    display: 'inline-block',
    margin: '1em',
  },
};

const TooltipFontIcon = injectTooltip(({ children, iconClassName, tooltip }) => (
  <div style="{styles.tooltipContainer}">
    {tooltip}
    {children}
  </div>
));

const TooltipLink = injectTooltip(({ children, tooltip }) =&gt; (
  <a style="{styles.tooltipContainer}">
    {tooltip}
    {children}
  </a>
));

const CustomExamples = () =&gt; (
  <section>
    <p>Any component can be composed with the tooltip. Here is are some with the FontIcons.</p></section>