diff --git a/webui/assets/main.js b/webui/assets/main.js
index e18c562fb..887181338 100644
--- a/webui/assets/main.js
+++ b/webui/assets/main.js
@@ -20,7 +20,8 @@ class REPL {
           // keyword: length of substring that comes after cursor
           "SetBit()": 1,
           "ClearBit()": 1,
-          "SetBitmapAttrs()": 1,
+          "SetRowAttrs()": 1,
+          "SetColumnAttrs()": 1,
           "Bitmap()": 1,
           "Union()": 1,
           "Intersect()": 1,
diff --git a/webui/assets/style.css b/webui/assets/style.css
index 515335ef9..3a5bcaf39 100644
--- a/webui/assets/style.css
+++ b/webui/assets/style.css
@@ -295,4 +295,47 @@ td{
 
 .expand {
   text-align: center;
-}
\ No newline at end of file
+}
+
+.query h2 {
+  display: inline-block;
+}
+
+.query-tooltip {
+  position: relative;
+  display: inline;
+  color: #000;
+  margin-left: 5px;
+}
+
+.query-tooltip:hover {
+  color: #000;
+}
+
+.query-tooltip-content {
+  background-color: rgb(250, 250, 250);
+  border: solid 1.5px #e4eff4;
+  color: #102445;
+  border-radius: 2px;
+  padding: 15px;
+  margin-bottom: 15px;
+
+  position: absolute;
+  left: 80px;
+  top: -30px;
+  z-index: 1;
+}
+
+.query-tooltip-container {
+  position: relative;
+  visibility: hidden;
+}
+
+.query-tooltip:hover+.query-tooltip-container{
+  visibility: visible;
+}
+
+.code{
+  font-family: monospace;
+}
+
diff --git a/webui/index.html b/webui/index.html
index 8422d4c45..09e39d17a 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -35,28 +35,60 @@
 
 			<div class="query">
 				<h2>Query</h2>
+				<a class="query-tooltip" href="https://www.pilosa.com/docs/webui/" target="_blank"><sup>?</sup></a>
+				<div class="query-tooltip-container">
+					<div class='query-tooltip-content'>
+						<h5>PQL</h5>
+						<div class="code">
+							SetBit(frame=foo, rowID=0, columnID=0)<br />
+							ClearBit(frame=foo, rowID=0, columnID=0)<br />
+							SetRowAttrs(frame=foo, rowID=0, color="blue")<br />
+							SetColumnAttrs(frame=foo, columnID=0, shape="circle")<br />
+							Bitmap(frame=foo, rowID=0)<br />
+							Range(frame=foo, rowID=0, start="2010-01", end="2017-03")<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>
+				</div>
 				<textarea name="name" id='query' rows="5"  required></textarea>
 				<div class='input-controls'>
-
-					<select class="" name="" id="index-dropdown">
-						<option value="0">Select index</option>
-					</select>
-					&nbsp;&nbsp;&nbsp;
-					<button  id='query-btn'>Run Query</button>
+					<div class="input-hints">
+						<select class="" name="" id="index-dropdown">
+							<option value="0">Select index</option>
+						</select>
+						&nbsp;&nbsp;&nbsp;
+						<button  id='query-btn'>Run Query</button>
+					</div>
 				</div>
-			</div>
 
 
-			<div  class="output-container">
+				<div  class="output-container">
 
-				<h2>Output</h2>
-				<div id="outputs">
+					<h2>Output</h2>
+					<div id="outputs">
+
+						<!-- results -->
+					</div>
 
-					<!-- results -->
 				</div>
 
 			</div>
-
 		</div>
 
 		<div class="interface" id="interface-cluster">