diff --git a/static/css/application.css b/static/css/application.css
index 672788420a..2fe1e723b7 100644
--- a/static/css/application.css
+++ b/static/css/application.css
@@ -117,7 +117,7 @@ input, select {
   font-weight: 800;
   font-style: italic; }
 
-.clearfix:after, .topbar:after, nav.sequence-nav:after, div.book-wrapper section.book nav:after, div.wiki-wrapper section.wiki-body header:after, html body section.main-content:after, html body section.outside-app:after, div.header-wrapper header:after, div.header-wrapper header hgroup:after, div.header-wrapper header nav ul:after, footer:after, li.calc-main div#calculator_wrapper form:after, div.leanModal_box#enroll ol:after, div.course-wrapper section.course-content .problem-set:after, div.course-wrapper section.course-content section.problems-wrapper:after, div.course-wrapper section.course-content div#seq_content:after, div.course-wrapper section.course-content ol.vert-mod > li:after, section.course-content div.video-subtitles div.video-wrapper section.video-controls:after, section.course-content div.video-subtitles div.video-wrapper section.video-controls div#slider:after, section.course-content nav.sequence-bottom ul:after, div#graph-container:after, div#schematic-container:after, div.book-wrapper section.book nav ul:after, div.info-wrapper section.updates > ol > li:after, div.info-wrapper section.handouts ol li:after, div.profile-wrapper section.course-info > ol > li:after, div#wiki_panel div#wiki_create_form:after, div.wiki-wrapper section.wiki-body:after, ul.badge-list li.badge:after {
+.clearfix:after, .topbar:after, nav.sequence-nav:after, div.book-wrapper section.book nav:after, div.wiki-wrapper section.wiki-body header:after, html body section.main-content:after, html body section.outside-app:after, div.header-wrapper header:after, div.header-wrapper header hgroup:after, div.header-wrapper header nav ul:after, footer:after, li.calc-main div#calculator_wrapper form:after, li.calc-main div#calculator_wrapper form div.input-wrapper:after, div.leanModal_box#enroll ol:after, div.course-wrapper section.course-content .problem-set:after, div.course-wrapper section.course-content section.problems-wrapper:after, div.course-wrapper section.course-content div#seq_content:after, div.course-wrapper section.course-content ol.vert-mod > li:after, section.course-content div.video-subtitles div.video-wrapper section.video-controls:after, section.course-content div.video-subtitles div.video-wrapper section.video-controls div#slider:after, section.course-content nav.sequence-bottom ul:after, div#graph-container:after, div#schematic-container:after, div.book-wrapper section.book nav ul:after, div.info-wrapper section.updates > ol > li:after, div.info-wrapper section.handouts ol li:after, div.profile-wrapper section.course-info > ol > li:after, div#wiki_panel div#wiki_create_form:after, div.wiki-wrapper section.wiki-body:after, ul.badge-list li.badge:after {
   content: ".";
   display: block;
   height: 0;
@@ -702,22 +702,6 @@ li.calc-main div#calculator_wrapper {
   clear: both; }
 li.calc-main div#calculator_wrapper form {
   padding: 22.652px; }
-li.calc-main div#calculator_wrapper form input#calculator_input {
-  border: none;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  font-size: 16px;
-  padding: 10px;
-  width: 61.741%;
-  margin: 0;
-  float: left; }
-li.calc-main div#calculator_wrapper form input#calculator_input:focus {
-  outline: none;
-  border: none; }
 li.calc-main div#calculator_wrapper form input#calculator_button {
   background: #111;
   border: 1px solid #000;
@@ -758,14 +742,82 @@ li.calc-main div#calculator_wrapper form input#calculator_output {
   margin: 1px 0 0;
   padding: 10px;
   width: 31.984%; }
-li.calc-main div#calculator_wrapper dl {
-  display: none; }
-li.calc-main div#calculator_wrapper dl dt {
+li.calc-main div#calculator_wrapper form div.input-wrapper {
+  position: relative;
+  width: 61.741%;
+  margin: 0;
+  float: left; }
+li.calc-main div#calculator_wrapper form div.input-wrapper input#calculator_input {
+  border: none;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  font-size: 16px;
+  padding: 10px;
+  width: 100%; }
+li.calc-main div#calculator_wrapper form div.input-wrapper input#calculator_input:focus {
+  outline: none;
+  border: none; }
+li.calc-main div#calculator_wrapper form div.input-wrapper div.help-wrapper {
+  position: absolute;
+  right: 8px;
+  top: 15px; }
+li.calc-main div#calculator_wrapper form div.input-wrapper div.help-wrapper a {
+  text-indent: -9999px;
+  overflow: hidden;
+  display: block;
+  width: 17px;
+  height: 17px;
+  background: url("/static/images/info-icon.png") center center no-repeat; }
+li.calc-main div#calculator_wrapper form div.input-wrapper div.help-wrapper dl {
+  background: #fff;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  -ms-border-radius: 3px;
+  -o-border-radius: 3px;
+  border-radius: 3px;
+  -webkit-box-shadow: 0 0 3px #999999;
+  -moz-box-shadow: 0 0 3px #999999;
+  box-shadow: 0 0 3px #999999;
+  color: #333;
+  opacity: 0;
+  padding: 10px;
+  position: absolute;
+  right: -40px;
+  top: -110px;
+  width: 500px;
+  -webkit-transition-property: all;
+  -moz-transition-property: all;
+  -ms-transition-property: all;
+  -o-transition-property: all;
+  transition-property: all;
+  -webkit-transition-duration: 0.15s;
+  -moz-transition-duration: 0.15s;
+  -ms-transition-duration: 0.15s;
+  -o-transition-duration: 0.15s;
+  transition-duration: 0.15s;
+  -webkit-transition-timing-function: ease-out;
+  -moz-transition-timing-function: ease-out;
+  -ms-transition-timing-function: ease-out;
+  -o-transition-timing-function: ease-out;
+  transition-timing-function: ease-out;
+  -webkit-transition-delay: 0;
+  -moz-transition-delay: 0;
+  -ms-transition-delay: 0;
+  -o-transition-delay: 0;
+  transition-delay: 0; }
+li.calc-main div#calculator_wrapper form div.input-wrapper div.help-wrapper dl.shown {
+  opacity: 1;
+  top: -115px; }
+li.calc-main div#calculator_wrapper form div.input-wrapper div.help-wrapper dl dt {
   clear: both;
   float: left;
   font-weight: bold;
   padding-right: 11.326px; }
-li.calc-main div#calculator_wrapper dl dd {
+li.calc-main div#calculator_wrapper form div.input-wrapper div.help-wrapper dl dd {
   float: left; }
 
 #lean_overlay {
diff --git a/static/images/info-icon.png b/static/images/info-icon.png
new file mode 100644
index 0000000000..736b2f2374
Binary files /dev/null and b/static/images/info-icon.png differ
diff --git a/templates/main.html b/templates/main.html
index fa0fcd462e..07e1d75695 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -57,21 +57,27 @@
 
         <div id="calculator_wrapper">
           <form id="calculator">
-            <input type="text" id="calculator_input" />
-            <dl class="help">
-              <dt>Suffixes:</dt>
-              <dd> %kMGTcmunp</dd>
-              <dt>Operations:</dt>
-              <dd>^ * / + - ()</dd>
-              <dt>Functions:</dt>
-              <dd>sin, cos, tan, sqrt, log10, log2, ln, arccos, arcsin, arctan, abs </dd>
-              <dt>Constants</dt>
-              <dd>e, pi</dd>
+            <div class="input-wrapper">
+              <input type="text" id="calculator_input" />
 
-              <!-- Students won't know what parallel means at this time.  Complex numbers aren't well tested in the courseware, so we would prefer to not expose them.  If you read the comments in the source, feel free to use them. If you run into a bug, please let us know. But we can't officially support them right now.
+              <div class="help-wrapper">
+                <a href="#">Hints</a>
+                <dl class="help">
+                  <dt>Suffixes:</dt>
+                  <dd> %kMGTcmunp</dd>
+                  <dt>Operations:</dt>
+                  <dd>^ * / + - ()</dd>
+                  <dt>Functions:</dt>
+                  <dd>sin, cos, tan, sqrt, log10, log2, ln, arccos, arcsin, arctan, abs </dd>
+                  <dt>Constants</dt>
+                  <dd>e, pi</dd>
 
-              <dt>Unsupported:</dt> <dd>||, j </dd>  -->
-            </dl>
+                  <!-- Students won't know what parallel means at this time.  Complex numbers aren't well tested in the courseware, so we would prefer to not expose them.  If you read the comments in the source, feel free to use them. If you run into a bug, please let us know. But we can't officially support them right now.
+
+                  <dt>Unsupported:</dt> <dd>||, j </dd>  -->
+                </dl>
+              </div>
+            </div>
             <input id="calculator_button" type="submit" value="="/>
             <input type="text" id="calculator_output"  readonly />
           </form>
@@ -128,11 +134,20 @@ $(function() {
     $("#calculator_wrapper").hide();
 
     $(".calc").click(function(){
-      $("#calculator_wrapper").slideToggle();
+      $("#calculator_wrapper").slideToggle("fast");
       $("#calculator_wrapper #calculator_input").focus();
       $(this).toggleClass("closed");
+      return false;
       });
 
+    $("div.help-wrapper a").hover(function(){
+      $(".help").toggleClass("shown");
+
+      });
+
+    $("div.help-wrapper a").click(function(){
+      return false;
+      });
     $("form#calculator").submit(function(e){
       e.preventDefault();
       $.getJSON("/calculate", {"equation":$("#calculator_input").attr("value")},
diff --git a/templates/sass/layout/_calculator.scss b/templates/sass/layout/_calculator.scss
index 64901c3077..8b5d60143a 100644
--- a/templates/sass/layout/_calculator.scss
+++ b/templates/sass/layout/_calculator.scss
@@ -34,21 +34,6 @@ li.calc-main {
       padding: lh();
       @extend .clearfix;
 
-      input#calculator_input {
-        border: none;
-        @include box-shadow(none);
-        @include box-sizing(border-box);
-        font-size: 16px;
-        padding: 10px;
-        width: flex-grid(7.5);
-        margin: 0;
-        float: left;
-
-        &:focus {
-          outline: none;
-          border: none;
-        }
-      }
 
       input#calculator_button {
         background: #111;
@@ -83,20 +68,70 @@ li.calc-main {
         padding: 10px;
         width: flex-grid(4);
       }
-    }
 
-    dl {
-      display: none;
-
-      dt {
-        clear: both;
+      div.input-wrapper {
+        position: relative;
+        @extend .clearfix;
+        width: flex-grid(7.5);
+        margin: 0;
         float: left;
-        font-weight: bold;
-        padding-right: lh(.5);
+
+      input#calculator_input {
+        border: none;
+        @include box-shadow(none);
+        @include box-sizing(border-box);
+        font-size: 16px;
+        padding: 10px;
+        width: 100%;
+
+        &:focus {
+          outline: none;
+          border: none;
+        }
       }
 
-      dd {
-        float: left;
+        div.help-wrapper {
+          position: absolute;
+          right: 8px;
+          top: 15px;
+
+          a {
+            @include hide-text;
+            width: 17px;
+            height: 17px;
+            background: url("/static/images/info-icon.png") center center no-repeat;
+          }
+
+          dl {
+            background: #fff;
+            @include border-radius(3px);
+            @include box-shadow(0 0 3px #999);
+            color: #333;
+            opacity: 0;
+            padding: 10px;
+            position: absolute;
+            right: -40px;
+            top: -110px;
+            width: 500px;
+            @include transition();
+
+            &.shown {
+              opacity: 1;
+              top: -115px;
+            }
+
+            dt {
+              clear: both;
+              float: left;
+              font-weight: bold;
+              padding-right: lh(.5);
+            }
+
+            dd {
+              float: left;
+            }
+          }
+        }
       }
     }
   }