diff --git a/webui/assets/style.css b/webui/assets/style.css
index 515335ef9..5fec5b5c6 100644
--- a/webui/assets/style.css
+++ b/webui/assets/style.css
@@ -295,4 +295,42 @@ td{
 
 .expand {
   text-align: center;
-}
\ No newline at end of file
+}
+
+.query h2 {
+  display: inline-block;
+}
+
+.query-tooltip {
+  position: relative;
+  display: inline;
+  color: #1db598;
+  margin-left: 5px;
+}
+
+.query-tooltip-content {
+  visibility: hidden;
+  background-color: rgb(250, 250, 250);
+  border: solid 1.5px #e4eff4;
+  color: #102445;
+  border-radius: 2px;
+  padding: 15px;
+  margin-bottom: 15px;
+
+  /* Position the tooltip */
+  position: absolute;
+  /*
+  left: 423px;
+  top: 100px;
+  */
+  z-index: 1;
+}
+
+.query-tooltip:hover+.query-tooltip-content {
+  visibility: visible;
+}
+
+.code{
+  font-family: monospace;
+}
+
diff --git a/webui/index.html b/webui/index.html
index 8422d4c45..53feb0b7a 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -34,10 +34,39 @@
 		<div class="interface interface-active" id="interface-console">
 
 			<div class="query">
-				<h2>Query</h2>
+				<h2>Query</h2><a class="query-tooltip" href="https://www.pilosa.com/docs/webui/" target="_blank">?</a>
+				<div class='query-tooltip-content'>
+					<h5>PQL</h5>
+					<div class="code">
+						SetBit(frame=foo, row=0, column=0)<br />
+						ClearBit(frame=foo, row=0, column=0)<br />
+						SetRowAttrs(frame=foo, row=0, color="blue")<br />
+						SetColumnAttrs(frame=foo, column=0, shape="circle")<br />
+						Bitmap(frame=foo, row=0)<br />
+						Range(frame=foo, row=0, start="2010-01-01T00:00", end="2017-03-02T03:00")<br />
+						Count(&lt;BITMAP_CALL&gt;)<br />
+						TopN([BITMAP_CALL], frame=foo, n=20)<br />
+						Union([BITMAP_CALL, ...])<br />
+						Intersect(&lt;BITMAP_CALL&gt;, [BITMAP_CALL, ...])<br />
+						Difference(&lt;BITMAP_CALL&gt;, &lt;BITMAP_CALL&gt;)
+					</div>
+					<br />
+					<h5>Special commands</h5>
+				    <div class="code">
+						:create index test [columnLabel=column]<br />
+						:use index test<br />
+						:create frame foo [rowLabel=row]<br />
+						:delete index test<br />
+						:delete frame foo
+					</div>
+					<br />
+					&lt;tab&gt;: autocomplete<br />
+					&lt;up&gt;/&lt;down&gt;: history<br />
+				</div>
 				<textarea name="name" id='query' rows="5"  required></textarea>
-				<div class='input-controls'>
-
+			</div>
+			<div class='input-controls'>
+				<div class="input-hints">
 					<select class="" name="" id="index-dropdown">
 						<option value="0">Select index</option>
 					</select>