diff --git a/admin/css/screen.css b/admin/css/screen.css
index 2f058efb2..b19bcdfe5 100644
--- a/admin/css/screen.css
+++ b/admin/css/screen.css
@@ -555,6 +555,9 @@ form.member-profile-form #Groups .middleColumn { margin-left: 0; width: 100%; }
 form.member-profile-form #Groups .middleColumn .TreeDropdownField { width: 90%; max-width: 90%; }
 form.member-profile-form #Permissions .optionset li { float: none; width: auto; }
 
+.memberdatetimeoptionset .description { font-style: normal; }
+.memberdatetimeoptionset .toggle { font-size: 11px; }
+
 .cms .cms-content { border-right: 1px solid #BBB; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; background: #eceff1; width: 800px; z-index: 40; }
 .cms .cms-content-fields { overflow-y: auto; overflow-x: auto; background: none; width: 100%; }
 .cms .cms-content-fields #Root_Main .confirmedpassword { border-bottom: none; box-shadow: none; }
diff --git a/admin/javascript/LeftAndMain.js b/admin/javascript/LeftAndMain.js
index cbce0f185..9d9141b0f 100644
--- a/admin/javascript/LeftAndMain.js
+++ b/admin/javascript/LeftAndMain.js
@@ -928,25 +928,6 @@ jQuery.noConflict();
 
 		});
 
-		/**
-		 * Simple toggle link, which points to a DOm element by its ID selector
-		 * in the href attribute (which doubles as an anchor link to that element).
-		 */
-		$('.cms .cms-help-toggle').entwine({
-			onmatch: function() {
-				this._super();
-
-				$(this.attr('href')).hide();
-			},
-			onunmatch: function() {
-				this._super();
-			},
-			onclick: function(e) {
-				$(this.attr('href')).toggle();
-				e.preventDefault();
-			}
-		});
-
 		/**
 		 * Allows to lazy load a panel, by leaving it empty
 		 * and declaring a URL to load its content via a 'url' HTML5 data attribute.
diff --git a/admin/javascript/MemberDatetimeOptionsetField.js b/admin/javascript/MemberDatetimeOptionsetField.js
new file mode 100644
index 000000000..b35cc0d4f
--- /dev/null
+++ b/admin/javascript/MemberDatetimeOptionsetField.js
@@ -0,0 +1,20 @@
+(function($) {
+	$.entwine('ss', function($){
+		
+		$('.memberdatetimeoptionset').entwine({
+			onmatch: function() {
+				this.find('.description .toggle-content').hide();
+				this._super();
+			}
+		});
+
+		$('.memberdatetimeoptionset .toggle').entwine({
+			onclick: function(e) {
+				jQuery(this).closest('.description').find('.toggle-content').toggle();
+				return false;
+			}
+		});
+
+	});
+	
+}(jQuery));
diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss
index 332ade848..31265f62c 100644
--- a/admin/scss/_style.scss
+++ b/admin/scss/_style.scss
@@ -998,6 +998,15 @@ form.member-profile-form {
 	}
 }
 
+.memberdatetimeoptionset {
+	.description {
+		font-style: normal;
+	}
+	.toggle {
+		font-size: $font-base-size - 1;
+	}
+}
+
 .cms {
 	.cms-content {
 		border-right: 1px solid #BBB;
diff --git a/forms/MemberDatetimeOptionsetField.php b/forms/MemberDatetimeOptionsetField.php
index d3ef113d7..59d6e9855 100644
--- a/forms/MemberDatetimeOptionsetField.php
+++ b/forms/MemberDatetimeOptionsetField.php
@@ -6,6 +6,8 @@
 class MemberDatetimeOptionsetField extends OptionsetField {
 
 	public function Field($properties = array()) {
+		Requirements::javascript(FRAMEWORK_ADMIN_DIR . '/javascript/MemberDatetimeOptionsetField.js');
+
 		$options = '';
 		$odd = 0;
 		$source = $this->getSource();
@@ -39,7 +41,11 @@ class MemberDatetimeOptionsetField extends OptionsetField {
 				$itemID, $this->name, $checked)
 			. sprintf('<label for="%s_custom">%s:</label>',
 				$itemID, _t('MemberDatetimeOptionsetField.Custom', 'Custom'))
-			. sprintf("<input class=\"customFormat\" name=\"%s_custom\" value=\"%s\" />\n", $this->name, $value)
+			. sprintf(
+					"<input class=\"customFormat cms-help cms-help-tooltip\" name=\"%s_custom\" value=\"%s\" />\n",
+					$this->name,
+					$value
+				)
 			. sprintf("<input type=\"hidden\" class=\"formatValidationURL\" value=\"%s\" />",
 				$this->Link() . '/validate');
 		$options .= ($value) ? sprintf(
@@ -47,15 +53,6 @@ class MemberDatetimeOptionsetField extends OptionsetField {
 			_t('MemberDatetimeOptionsetField.Preview', 'Preview'),
 			Zend_Date::now()->toString($value)
 		) : '';
-		$options .= sprintf(
-			'<a class="cms-help-toggle" href="#%s">%s</a>',
-			$this->id() . '_Help',
-			_t('MemberDatetimeOptionsetField.TOGGLEHELP', 'Toggle formatting help')
-		);
-		$options .= "<div id=\"" . $this->id() . "_Help\">";
-		$options .= $this->getFormattingHelpText();
-		$options .= "</div>";
-		$options .= "</li>\n";
 
 		$id = $this->id();
 		return "<ul id=\"$id\" class=\"optionset {$this->extraClass()}\">\n$options</ul>\n";
@@ -64,42 +61,46 @@ class MemberDatetimeOptionsetField extends OptionsetField {
 	/**
 	 * @todo Put this text into a template?
 	 */
-	public function getFormattingHelpText() {
-		$output = '<ul>';
-		$output .= '<li>YYYY = ' . _t('MemberDatetimeOptionsetField.FOURDIGITYEAR', 'Four-digit year',
-			40, 'Help text describing what "YYYY" means in ISO date formatting') . '</li>';
-		$output .= '<li>YY = ' . _t('MemberDatetimeOptionsetField.TWODIGITYEAR', 'Two-digit year',
-			40, 'Help text describing what "YY" means in ISO date formatting') . '</li>';
-		$output .= '<li>MMMM = ' . _t('MemberDatetimeOptionsetField.FULLNAMEMONTH', 'Full name of month (e.g. June)',
-			40, 'Help text describing what "MMMM" means in ISO date formatting') . '</li>';
-		$output .= '<li>MMM = ' . _t('MemberDatetimeOptionsetField.SHORTMONTH', 'Short name of month (e.g. Jun)',
-			40, 'Help text letting describing what "MMM" means in ISO date formatting') . '</li>';
-		$output .= '<li>MM = ' . _t('MemberDatetimeOptionsetField.TWODIGITMONTH', 'Two-digit month (01=January, etc.)',
-			40, 'Help text describing what "MM" means in ISO date formatting') . '</li>';
-		$output .= '<li>M = ' . _t('MemberDatetimeOptionsetField.MONTHNOLEADING', 'Month digit without leading zero',
-			40, 'Help text describing what "M" means in ISO date formatting') . '</li>';
-		$output .= '<li>dd = ' . _t('MemberDatetimeOptionsetField.TWODIGITDAY', 'Two-digit day of month',
-			40, 'Help text describing what "dd" means in ISO date formatting') . '</li>';
-		$output .= '<li>d = ' . _t('MemberDatetimeOptionsetField.DAYNOLEADING', 'Day of month without leading zero',
-			40, 'Help text describing what "d" means in ISO date formatting') . '</li>';
-		$output .= '<li>hh = ' . _t('MemberDatetimeOptionsetField.TWODIGITHOUR', 'Two digits of hour (00 through 23)',
-			40, 'Help text describing what "hh" means in ISO date formatting') . '</li>';
-		$output .= '<li>h = ' . _t('MemberDatetimeOptionsetField.HOURNOLEADING', 'Hour without leading zero',
-			40, 'Help text describing what "h" means in ISO date formatting') . '</li>';
-		$output .= '<li>mm = ' . _t('MemberDatetimeOptionsetField.TWODIGITMINUTE',
+	public function getDescription() {
+		$output = 
+			'<a href="#" class="toggle">' 
+			. _t('MemberDatetimeOptionsetField.Toggle', 'Show formatting help')
+			. '</a>'
+			. '<ul class="toggle-content">'
+			. '<li>YYYY = ' . _t('MemberDatetimeOptionsetField.FOURDIGITYEAR', 'Four-digit year',
+				40, 'Help text describing what "YYYY" means in ISO date formatting') . '</li>'
+			. '<li>YY = ' . _t('MemberDatetimeOptionsetField.TWODIGITYEAR', 'Two-digit year',
+				40, 'Help text describing what "YY" means in ISO date formatting') . '</li>'
+			. '<li>MMMM = ' . _t('MemberDatetimeOptionsetField.FULLNAMEMONTH', 'Full name of month (e.g. June)',
+				40, 'Help text describing what "MMMM" means in ISO date formatting') . '</li>'
+			. '<li>MMM = ' . _t('MemberDatetimeOptionsetField.SHORTMONTH', 'Short name of month (e.g. Jun)',
+				40, 'Help text letting describing what "MMM" means in ISO date formatting') . '</li>'
+			. '<li>MM = ' . _t('MemberDatetimeOptionsetField.TWODIGITMONTH', 'Two-digit month (01=January, etc.)',
+				40, 'Help text describing what "MM" means in ISO date formatting') . '</li>'
+			. '<li>M = ' . _t('MemberDatetimeOptionsetField.MONTHNOLEADING', 'Month digit without leading zero',
+				40, 'Help text describing what "M" means in ISO date formatting') . '</li>'
+			. '<li>dd = ' . _t('MemberDatetimeOptionsetField.TWODIGITDAY', 'Two-digit day of month',
+				40, 'Help text describing what "dd" means in ISO date formatting') . '</li>'
+			. '<li>d = ' . _t('MemberDatetimeOptionsetField.DAYNOLEADING', 'Day of month without leading zero',
+				40, 'Help text describing what "d" means in ISO date formatting') . '</li>'
+			. '<li>hh = ' . _t('MemberDatetimeOptionsetField.TWODIGITHOUR', 'Two digits of hour (00 through 23)',
+				40, 'Help text describing what "hh" means in ISO date formatting') . '</li>'
+			. '<li>h = ' . _t('MemberDatetimeOptionsetField.HOURNOLEADING', 'Hour without leading zero',
+				40, 'Help text describing what "h" means in ISO date formatting') . '</li>'
+			. '<li>mm = ' . _t('MemberDatetimeOptionsetField.TWODIGITMINUTE',
 			'Two digits of minute (00 through 59)',
-			40, 'Help text describing what "mm" means in ISO date formatting') . '</li>';
-		$output .= '<li>m = ' . _t('MemberDatetimeOptionsetField.MINUTENOLEADING', 'Minute without leading zero',
-			40, 'Help text describing what "m" means in ISO date formatting') . '</li>';
-		$output .= '<li>ss = ' . _t('MemberDatetimeOptionsetField.TWODIGITSECOND',
+				40, 'Help text describing what "mm" means in ISO date formatting') . '</li>'
+			. '<li>m = ' . _t('MemberDatetimeOptionsetField.MINUTENOLEADING', 'Minute without leading zero',
+				40, 'Help text describing what "m" means in ISO date formatting') . '</li>'
+			. '<li>ss = ' . _t('MemberDatetimeOptionsetField.TWODIGITSECOND',
 			'Two digits of second (00 through 59)',
-			40, 'Help text describing what "ss" means in ISO date formatting') . '</li>';
-		$output .= '<li>s = ' . _t('MemberDatetimeOptionsetField.DIGITSDECFRACTIONSECOND',
+				40, 'Help text describing what "ss" means in ISO date formatting') . '</li>'
+			. '<li>s = ' . _t('MemberDatetimeOptionsetField.DIGITSDECFRACTIONSECOND',
 			'One or more digits representing a decimal fraction of a second',
-			40, 'Help text describing what "s" means in ISO date formatting') . '</li>';
-		$output .= '<li>a = ' . _t('MemberDatetimeOptionsetField.AMORPM', 'AM (Ante meridiem) or PM (Post meridiem)',
-			40, 'Help text describing what "a" means in ISO date formatting') . '</li>';
-		$output .= '</ul>';
+				40, 'Help text describing what "s" means in ISO date formatting') . '</li>'
+			. '<li>a = ' . _t('MemberDatetimeOptionsetField.AMORPM', 'AM (Ante meridiem) or PM (Post meridiem)',
+				40, 'Help text describing what "a" means in ISO date formatting') . '</li>'
+			. '</ul>';
 		return $output;
 	}
 
diff --git a/tests/behat/features/profile.feature b/tests/behat/features/profile.feature
new file mode 100644
index 000000000..3ca0e3ab9
--- /dev/null
+++ b/tests/behat/features/profile.feature
@@ -0,0 +1,13 @@
+@database-defaults
+Feature: My Profile
+  As a CMS user
+  I want to be able to change personal settings
+  In order to streamline my CMS experience
+
+  @javascript
+  Scenario: I can see date formatting help
+    Given I am logged in with "ADMIN" permissions
+    # Only tests this specific field and admin UI because its got built-in tooltips
+    When I go to "/admin/myprofile"
+    And I follow "Show formatting help"
+    Then I should see "Four-digit year"
\ No newline at end of file