redash/client/app/components/visualizations/editor/ContextHelp.jsx

import React from 'react';
import PropTypes from 'prop-types';
import Popover from 'antd/lib/popover';
import Tooltip from 'antd/lib/tooltip';
import Icon from 'antd/lib/icon';
import HelpTrigger from '@/components/HelpTrigger';

import './context-help.less';

export default function ContextHelp({ icon, children, ...props }) {
  return (
    <Popover {...props} content={children}>{icon || ContextHelp.defaultIcon}</Popover>
  );
}

ContextHelp.propTypes = {
  icon: PropTypes.node,
  children: PropTypes.node,
};

ContextHelp.defaultProps = {
  icon: null,
  children: null,
};

ContextHelp.defaultIcon = (
  <Icon className="m-l-5 m-r-5" type="question-circle" theme="filled" />
);

function NumberFormatSpecs() {
  return (
    <HelpTrigger type="NUMBER_FORMAT_SPECS" className="visualization-editor-context-help">
      {ContextHelp.defaultIcon}
    </HelpTrigger>
  );
}

function DateTimeFormatSpecs() {
  return (
    <Tooltip title={(<React.Fragment>Formatting Dates and Times<i className="fa fa-external-link m-l-5" /></React.Fragment>)}>
      <a
        className="visualization-editor-context-help"
        href="https://momentjs.com/docs/#/displaying/format/"
        target="_blank"
        rel="noopener noreferrer"
      >
        {ContextHelp.defaultIcon}
      </a>
    </Tooltip>
  );
}

ContextHelp.NumberFormatSpecs = NumberFormatSpecs;
ContextHelp.DateTimeFormatSpecs = DateTimeFormatSpecs;