How to use @crave/farmblocks-tooltip - 10 common examples

);
};

MoreInfo.propTypes = {
  children: PropTypes.node.isRequired,
  trigger: PropTypes.node,
  text: PropTypes.string,
  // eslint-disable-next-line react/forbid-prop-types
  tooltipProps: PropTypes.object,
};

MoreInfo.defaultProps = {
  trigger: ,
  tooltipProps: {
    positionX: POSITIONS.X.CENTER,
  },
};

export default MoreInfo;

};

    static defaultProps = {
      value: "",
      type: "text",
      focused: false,
      active: false,
      disabled: false,
      onChange: () => null,
      onFocus: () => null,
      onBlur: () => null,
      input: null,
      refName: "ref",
      clearable: false,
      clearIcon: "wg-close-int",
      moreInfoTooltipProps: { positionX: POSITIONS.X.LEFT },
      autoControlFocusedStyle: true,
    };

    state = {
      value: getValueFromProps(this.props),
      focused: this.props.focused,
    };

    componentDidMount() {
      if (this.props.focused) {
        this.setInputFocus();
      }
    }

    componentDidUpdate = prevProps => {
      if (this.props.focused && !prevProps.focused) {

className="labelText"
        fontWeight="title"
        size={fontSizes.SMALL}
        lineHeight="16px"
        letterSpacing="2px"
        upper
        type={labelColor(props)}
      >
        {children}
      

      {moreInfoContent && (
        
          {moreInfoContent}
        
      )}
    
  );
};

.add("with label and more info", () => (
    
  ))
  .add("with prefix", () => (

.add("Without text - tooltip right aligned", () => (
    <div style="{{">
      
        Awesome tooltip
      
    </div>
  ))
  .add("extended style", () =&gt; (

.add("Without text - tooltip left aligned", () => (
    <div>
      
        Tooltip left aligned with text
      
    </div>
  ))
  .add("Without text - tooltip right aligned", () =&gt; (

.add("Center aligned", () => (
    <div style="{{">
      Trigger}
        content={() =&gt; }
        tooltipProps={{ positionX: POSITIONS.X.CENTER }}
        onOutsideClick={action("onOutsideClick")}
      /&gt;
    </div>
  ))
  .add("Disabled", () =&gt; (

.add("With more info right aligned", () => (
    <label>
      Default Label
    </label>
  ))
  .add("extended style", () =&gt; (

(props => (
                
                  {tooltipMessage}
                
              ))
            }

.add("Button as a trigger - Right aligned", () => (
    <div style="{{">
      Trigger}
        content={() =&gt; }
        tooltipProps={{ positionX: POSITIONS.X.RIGHT }}
        onOutsideClick={action("onOutsideClick")}
      /&gt;
    </div>
  ))
  .add("Center aligned", () =&gt; (