diff --git a/_inc/client/components/forms/index.jsx b/_inc/client/components/forms/index.jsx
index 28b9bcce35e38..85711af5e9e5c 100644
--- a/_inc/client/components/forms/index.jsx
+++ b/_inc/client/components/forms/index.jsx
@@ -9,31 +9,15 @@ import forOwn from 'lodash/forOwn';
 import isEmpty from 'lodash/isEmpty';
 import { translate as __ } from 'i18n-calypso';
 import Button from 'components/button';
-import Gridicon from 'components/gridicon';
 import SelectDropdown from 'components/select-dropdown';
 
-export const FormFieldset = React.createClass( {
-
-	displayName: 'FormFieldset',
-
-	render: function() {
-		return (
-			<fieldset { ...omit( this.props, 'className' ) } className={ classnames( this.props.className, 'jp-form-fieldset' ) } >
-				{
-					this.props.support
-						? <div className="jp-module-settings__learn-more">
-							<Button borderless compact href={ this.props.support }>
-								<Gridicon icon="help-outline" />
-								<span className="screen-reader-text">{ __( 'Learn More' ) }</span>
-							</Button>
-					</div>
-						: ''
-				}
-				{ this.props.children }
-			</fieldset>
-		);
-	}
-} );
+export const FormFieldset = props => {
+	return (
+		<fieldset { ...omit( props, 'className' ) } className={ classnames( props.className, 'jp-form-fieldset' ) } >
+			{ props.children }
+		</fieldset>
+	);
+};
 
 export const FormLabel = React.createClass( {
 
diff --git a/_inc/client/components/module-settings/style.scss b/_inc/client/components/module-settings/style.scss
index 10fd7bde800a1..4d6051c8f0950 100644
--- a/_inc/client/components/module-settings/style.scss
+++ b/_inc/client/components/module-settings/style.scss
@@ -22,8 +22,11 @@
 	right: 17px;
 
 	.jp-form-fieldset & {
-		top: -12px;
-		right:-7px;
+		top: 4px;
+	}
+
+	.dops-info-popover {
+		white-space: nowrap;
 	}
 }
 
diff --git a/_inc/client/components/settings-group/index.jsx b/_inc/client/components/settings-group/index.jsx
index ba58d9c0d4530..c421ab167788c 100644
--- a/_inc/client/components/settings-group/index.jsx
+++ b/_inc/client/components/settings-group/index.jsx
@@ -6,8 +6,8 @@ import { connect } from 'react-redux';
 import { translate as __ } from 'i18n-calypso';
 import Card from 'components/card';
 import classNames from 'classnames';
-import Button from 'components/button';
-import Gridicon from 'components/gridicon';
+import InfoPopover from 'components/info-popover';
+import ExternalLink from 'components/external-link';
 
 /**
  * Internal dependencies
@@ -17,16 +17,11 @@ import { userCanManageModules, isSitePublic } from 'state/initial-state';
 import { getSitePlan } from 'state/site';
 
 export const SettingsGroup = props => {
-	let module = props.module,
-		support = props.support
-			? props.support
-			: false,
-		// Disable in Dev Mode
-		disableInDevMode = props.disableInDevMode && props.isUnavailableInDevMode( module.module );
-
-	if ( ! support && module && '' !== module.learn_more_button ) {
-		support = module.learn_more_button;
-	}
+	const module = props.module,
+		disableInDevMode = props.disableInDevMode && props.isUnavailableInDevMode( module.module ),
+		support = ! props.support && module && '' !== module.learn_more_button
+			? module.learn_more_button
+			: props.support;
 
 	return (
 		<div className="jp-form-settings-group">
@@ -40,10 +35,14 @@ export const SettingsGroup = props => {
 				{
 					support && (
 						<div className="jp-module-settings__learn-more">
-							<Button borderless compact href={ support }>
-								<Gridicon icon="help-outline" />
-								<span className="screen-reader-text">{ __( 'Learn More' ) }</span>
-							</Button>
+							<InfoPopover screenReaderText={ __( 'Learn more' ) }>
+								<ExternalLink
+									icon={ false }
+									href={ support }
+									target="_blank">
+									{ __( 'Learn more' ) }
+								</ExternalLink>
+							</InfoPopover>
 						</div>
 					)
 				}
@@ -55,8 +54,16 @@ export const SettingsGroup = props => {
 	);
 };
 
+SettingsGroup.propTypes = {
+	support: React.PropTypes.string
+};
+
+SettingsGroup.defaultProps = {
+	support: ''
+};
+
 export default connect(
-	( state ) => {
+	state => {
 		return {
 			isDevMode: isDevMode( state ),
 			sitePlan: getSitePlan( state ),
diff --git a/_inc/client/components/settings-group/test/component.js b/_inc/client/components/settings-group/test/component.js
index d6bdeb2e35a9d..985c15b204212 100644
--- a/_inc/client/components/settings-group/test/component.js
+++ b/_inc/client/components/settings-group/test/component.js
@@ -17,10 +17,22 @@ describe( 'SettingsGroup', () => {
 		learn_more_button: 'https://jetpack.com/support/protect'
 	};
 
-	const settingsGroup = shallow( <SettingsGroup support={ testProps.learn_more_button } /> );
+	const settingsGroup = shallow( <SettingsGroup support={ testProps.learn_more_button } hasChild /> );
 
-	it( 'the learn more icon is linked to the correct URL', () => {
-		expect( settingsGroup.find( 'Button' ).get(0).props.href ).to.be.equal( 'https://jetpack.com/support/protect' );
+	it( 'outputs a special CSS class when it has the hasChild property', () => {
+		expect( settingsGroup.find( 'Card' ).props().className ).to.contain( 'jp-form-has-child' );
 	} );
 
+	it( 'the learn more icon has an informational tooltip', () => {
+		expect( settingsGroup.find( 'InfoPopover' ) ).to.have.length( 1 );
+		expect( settingsGroup.find( 'ExternalLink' ).get( 0 ).props.href ).to.be.equal( 'https://jetpack.com/support/protect' );
+	} );
+
+	it( 'if no support link is passed directly, looks for one in the module', () => {
+		expect( shallow( <SettingsGroup module={ testProps } /> ).find( 'InfoPopover' ) ).to.have.length( 1 );
+	} );
+
+	it( 'does not have a learn more icon if there is no link or module are passed', () => {
+		expect( shallow( <SettingsGroup /> ).find( 'InfoPopover' ) ).to.have.length( 0 );
+	} );
 } );
diff --git a/_inc/client/discussion/comments.jsx b/_inc/client/discussion/comments.jsx
index 8e781507fa5d1..6507ffebd82f4 100644
--- a/_inc/client/discussion/comments.jsx
+++ b/_inc/client/discussion/comments.jsx
@@ -83,34 +83,36 @@ export const Comments = moduleSettingsForm(
 						</FormFieldset>
 					</SettingsGroup>
 					<SettingsGroup>
-						<FormFieldset support={ gravatar.learn_more_button }>
+						<FormFieldset>
 							<ModuleToggle
 								slug="gravatar-hovercards"
 								compact
 								activated={ this.props.getOptionValue( 'gravatar-hovercards' ) }
 								toggling={ this.props.isSavingAnyOption( 'gravatar-hovercards' ) }
 								toggleModule={ this.props.toggleModuleNow }
-							>
-							<span className="jp-form-toggle-explanation">
-								{
-									gravatar.description
-								}
-							</span>
+								>
+								<span className="jp-form-toggle-explanation">
+									{
+										gravatar.description + ' '
+									}
+									<a href={ gravatar.learn_more_button }>{ __( 'Learn more about Gravatar' ) }</a>
+								</span>
 							</ModuleToggle>
 						</FormFieldset>
-						<FormFieldset support={ markdown.learn_more_button }>
+						<FormFieldset>
 							<ModuleToggle
 								slug="markdown"
 								compact
 								activated={ !! this.props.getOptionValue( 'wpcom_publish_comments_with_markdown', 'markdown' ) }
 								toggling={ this.props.isSavingAnyOption( [ 'markdown', 'wpcom_publish_comments_with_markdown' ] ) }
 								toggleModule={ this.updateFormStateByMarkdown }
-							>
-							<span className="jp-form-toggle-explanation">
-								{
-									__( 'Enable Markdown use for comments' )
-								}
-							</span>
+								>
+								<span className="jp-form-toggle-explanation">
+									{
+										__( 'Enable Markdown use for comments' ) + ' '
+									}
+									<a href={ markdown.learn_more_button }>{ __( 'Learn more about Markdown' ) }</a>
+								</span>
 							</ModuleToggle>
 						</FormFieldset>
 					</SettingsGroup>