diff --git a/fec/fec/static/js/legal/Filters.js b/fec/fec/static/js/legal/Filters.js
index 736dbdd7fb..d0060651ae 100644
--- a/fec/fec/static/js/legal/Filters.js
+++ b/fec/fec/static/js/legal/Filters.js
@@ -53,6 +53,13 @@ function Filters(props) {
             handleChange={props.setQuery}
             getResults={props.getResults}
             keywordModal={true}
+            TooltipHelp={{
+              addTooltip: true,
+              message:
+                'Refine a keyword search by using AND, OR, “ ”, -, to expand or limit results.',
+              verticalPosition: 'above',
+              horizontalPosition: 'left'
+            }}
           />
           <CheckboxFilter
             key="ao_is_pending"
diff --git a/fec/fec/static/js/legal/filters/TextFilter.js b/fec/fec/static/js/legal/filters/TextFilter.js
index 2839f37984..e1d708d1e3 100644
--- a/fec/fec/static/js/legal/filters/TextFilter.js
+++ b/fec/fec/static/js/legal/filters/TextFilter.js
@@ -1,5 +1,6 @@
 const React = require('react');
 const PropTypes = require('prop-types');
+const TooltipHelp = require('./TooltipHelp');
 
 function TextFilter(props) {
   function handleKeydown(e) {
@@ -9,39 +10,53 @@ function TextFilter(props) {
   }
 
   return (
-    <div className="filter">
-      <label className="label" htmlFor={props.name + '-filter'}>
-        {props.label}
-      </label>
-      <div className="combo combo--search--mini">
-        <input
-          id={props.name + '-filter'}
-          type="text"
-          name={props.name}
-          className="combo__input"
-          value={props.value || ''}
-          onChange={props.handleChange}
-          onKeyDown={handleKeydown}
-        />
-        <button
-          className="combo__button button--search button--standard"
-          onClick={props.getResults}
+    <div>
+      <div className="filter">
+        <label
+          className="label t-inline-block"
+          htmlFor={props.name + '-filter'}
         >
-          <span className="u-visually-hidden">Search</span>
-        </button>
+          {props.label}
+        </label>
+        {props.TooltipHelp.addTooltip && (
+          <TooltipHelp
+            message={props.TooltipHelp.message}
+            verticalPosition={props.TooltipHelp.verticalPosition}
+            horizontalPosition={props.TooltipHelp.horizontalPosition}
+          />
+        )}
+        <div className="combo combo--search--mini">
+          <input
+            id={props.name + '-filter'}
+            type="text"
+            name={props.name}
+            className="combo__input"
+            value={props.value || ''}
+            onChange={props.handleChange}
+            onKeyDown={handleKeydown}
+          />
+          <button
+            className="combo__button button--search button--standard"
+            onClick={props.getResults}
+          >
+            <span className="u-visually-hidden">Search</span>
+          </button>
+        </div>
+        {props.keywordModal && (
+          <button
+            className="button--keywords"
+            aria-controls="keyword-modal"
+            data-a11y-dialog-show="keyword-modal"
+          >
+            More keyword options
+          </button>
+        )}
+        {props.helpText && (
+          <span className="t-note t-sans search__example">
+            {props.helpText}
+          </span>
+        )}
       </div>
-      {props.keywordModal && (
-        <button
-          className="button--keywords"
-          aria-controls="keyword-modal"
-          data-a11y-dialog-show="keyword-modal"
-        >
-          More keyword options
-        </button>
-      )}
-      {props.helpText && (
-        <span className="t-note t-sans search__example">{props.helpText}</span>
-      )}
     </div>
   );
 }
@@ -49,8 +64,9 @@ function TextFilter(props) {
 TextFilter.defaultProps = {
   getResults: function() {},
   handleChange: function() {},
-  helpText: 'help',
+  helpText: '',
   keywordModal: true,
+  TooltipHelp: {},
   name: 'name',
   value: ''
 };
@@ -60,6 +76,7 @@ TextFilter.propTypes = {
   handleChange: PropTypes.func,
   helpText: PropTypes.string,
   keywordModal: PropTypes.bool,
+  TooltipHelp: PropTypes.object,
   name: PropTypes.string,
   value: PropTypes.string
 };
diff --git a/fec/fec/static/js/legal/filters/TooltipHelp.js b/fec/fec/static/js/legal/filters/TooltipHelp.js
new file mode 100644
index 0000000000..2fddec4929
--- /dev/null
+++ b/fec/fec/static/js/legal/filters/TooltipHelp.js
@@ -0,0 +1,25 @@
+const React = require('react');
+const PropTypes = require('prop-types');
+
+class TooltipHelp extends React.Component {
+  render() {
+    return (
+      <div className="tooltip__container">
+        <button className="tooltip__trigger">
+          <span className="u-visually-hidden">Learn more</span>
+        </button>
+        <div
+          className={`tooltip tooltip--${
+            this.props.verticalPosition
+          } tooltip--${this.props.horizontalPosition}`}
+        >
+          <p className="tooltip__content tooltip__content">
+            {this.props.message}
+          </p>
+        </div>
+      </div>
+    );
+  }
+}
+
+module.exports = TooltipHelp;
diff --git a/fec/fec/static/scss/components/_modals.scss b/fec/fec/static/scss/components/_modals.scss
index 4f5b82a4b3..2fb9500498 100644
--- a/fec/fec/static/scss/components/_modals.scss
+++ b/fec/fec/static/scss/components/_modals.scss
@@ -34,6 +34,7 @@
   @include media($lg) {
     margin-left: u(-40rem);
     width: u(80rem);
+    max-height:650px;
   }
 }
 
@@ -52,3 +53,11 @@
   @include shift(1);
   padding-top: u(1rem);
 }
+
+.keyword-modal {
+  .simple-table{
+    border-width: 0 0;
+  }
+
+}
+
diff --git a/fec/fec/static/scss/components/_search-controls.scss b/fec/fec/static/scss/components/_search-controls.scss
index 62ddbea4fa..15e87ffb84 100644
--- a/fec/fec/static/scss/components/_search-controls.scss
+++ b/fec/fec/static/scss/components/_search-controls.scss
@@ -1,6 +1,9 @@
 // Search Controls
 //
-// Used at the top of election lookup page
+// Used on:
+// election lookup page
+// embedded searches (MUR, AUDIT)
+// keyword modals
 //
 
 .search-controls__row {
@@ -87,6 +90,7 @@
   background: $gray-lightest;
 }
 
+//For data/election search boxes
 .election-search {
 
   .search--container {
@@ -122,6 +126,23 @@
   }
 }
 
+ //for keyword-options modals on AO, MUR, Statues searches
+.keyword-modal{
+  .modal__tips, modal__form {
+    display:table-row;
+    width:100%;
+  }
+  .modal__tips {
+    margin-left:0;
+  }
+
+  .search-controls__or--vertical {
+  width: 100%;
+  display:inline-grid;
+  }
+}
+
+
 @include media($med) {
   .search-controls__row {
     padding: u(2rem 0);
@@ -225,6 +246,35 @@
     }
   }
 
+  //for keyword-options modals on AO, MUR, Statues searches
+.keyword-modal{
+  .modal__tips, .modal__form {
+    display:table-cell;
+    width:44%;
+  }
+  .modal__tips {
+    margin-left: u(1rem);
+    padding-top: 0;
+  }
+  .search-controls__or--vertical {
+    margin: u(22.5rem 0);
+    width: u(3.5rem);
+    display:table-cell;
+
+    &::before,
+    &::after {
+      height: u(22.5rem);
+    }
+    &::before {
+      top: u(-22.5rem);
+    }
+
+    &::after {
+      top: auto;
+      bottom: u(-22.5rem);
+    }
+  }
+}
 
 }/*end MED breakpoint*/
 
diff --git a/fec/fec/static/scss/components/_tooltips.scss b/fec/fec/static/scss/components/_tooltips.scss
index 6f95c3aa0d..cefb41a7a0 100644
--- a/fec/fec/static/scss/components/_tooltips.scss
+++ b/fec/fec/static/scss/components/_tooltips.scss
@@ -50,16 +50,51 @@
   }
 }
 
+
+
+// Tooltips under/above an element
+//
+// By default, this class centers a tooltip with the element it's referencing and centers the point.
+//
+// .tooltip--above or .tooltip--under is Required
+// .tooltip--center    - The default, aligns tooltip centered with the element
+// .tooltip--left      - Aligns the tooltip along the right side of an element; useful when the element is near the left side of the page.
+// .tooltip--right     - Aligns the tooltip along the left side of the element; useful when the element is near the right side of the page.
+//
+// .tooltip-left and .tooltip--right are 30rem wide making them render shorter in height so they can be used where we want to avoid obstructing
+// content below or above
+
+// For tooltips on regular DOM elements (rather than on maps) that contain additional info
+//
+// <label class="label tooltip__trigger-text">Select something</label>
+// <div class="tooltip__container">
+//   <button class="tooltip__trigger"><span class="u-visually-hidden">Learn more</span></button>
+//   <div class="tooltip tooltip--under">
+//     <p class="tooltip__content">Learn more about this thing!</p>
+//   </div>
+//   <select><option>Select one</option></select>
+// </div>
+//
+// <button class="button button--cta button--export">Export</button>
+// <div class="tooltip tooltip--under tooltip--left">
+//   <p class="tooltip__content">Explanatory content about this element</p>
+// </div>
+//
+
+
 // When the tooltip is above the content. Puts the arrow at the bottom center of the tooltip
 .tooltip--above {
   width: u(12rem);
+  $bottom: u(1.5rem);
+  left: u(-4rem);
+  bottom: calc(100% + #{$bottom});
 
   &::before {
     @include triangle(2rem, $primary, down);
     bottom: u(-1rem);
     content: '';
     display: block;
-    left: u(5rem);
+    left: u(4.2rem);
     position: absolute;
   }
 
@@ -68,27 +103,43 @@
     content: '';
     display: block;
     position: absolute;
-    left: u(5.2rem);
+    left: u(4.4rem);
     bottom: u(-.7rem);
   }
-}
 
-// Tooltips under an element
-//
-// By default, this class centers a tooltip below the element it's referencing and centers the point.
-//
-// .tooltip--left      - Aligns the tooltip along the left side of an element; useful when the element is near the left side of the page.
-// .tooltip--right     - Aligns the tooltip along the right side of the element; useful when the element is near the right side of the page.
-//
-// <button class="button button--cta button--export">Export</button>
-// <div class="tooltip tooltip--under tooltip--under">
-//   <p class="tooltip__content">Explanatory content about this element</p>
-// </div>
-//
+  &.tooltip--left {
+    width: u(30rem);
+    left: u(-2rem);
+
+    &::before {
+      left: u(2rem);
+    }
+
+    &::after {
+      left: u(2.2rem);
+    }
+  }
+
+  &.tooltip--right {
+    width: u(30rem);
+    left: auto;
+    right: u(-3rem);
+
+    &::before {
+      left: auto;
+      right: u(2.8rem);
+    }
+    &::after {
+      left:auto;
+      right: u(3rem);
+    }
+  }
+
+}
 
 .tooltip--under {
   $top: u(1.5rem);
-  width: u(30rem);
+  width: u(12rem);
   left: u(-14rem);
   top: calc(100% + #{$top});
 
@@ -107,6 +158,7 @@
   }
 
   &.tooltip--left {
+    width: u(30rem);
     left: u(-2rem);
 
     &::before {
@@ -115,8 +167,9 @@
   }
 
   &.tooltip--right {
+    width: u(30rem);
     left: auto;
-    right: u(2rem);
+    right: u(-3rem);
 
     &::before {
       left: auto;
@@ -125,19 +178,61 @@
   }
 }
 
-// Tooltips: Learn more
-//
-// For tooltips on regular DOM elements (rather than on maps) that contain additional info
-//
-// <label class="label tooltip__trigger-text">Select something</label>
-// <div class="tooltip__container">
-//   <button class="tooltip__trigger"><span class="u-visually-hidden">Learn more</span></button>
-//   <div class="tooltip tooltip--under">
-//     <p class="tooltip__content">Learn more about this thing!</p>
-//   </div>
-//   <select><option>Select one</option></select>
-// </div>
-//
+// When the tooltip is above the content. Puts the arrow at the bottom center of the tooltip
+.tooltip--above {
+  width: u(12rem);
+  $bottom: u(1.5rem);
+  left: u(-4rem);
+  bottom: calc(100% + #{$bottom});
+
+  &::before {
+    @include triangle(2rem, $primary, down);
+    bottom: u(-1rem);
+    content: '';
+    display: block;
+    left: u(4.2rem);
+    position: absolute;
+  }
+
+  &::after {
+    @include triangle(1.6rem, $inverse, down);
+    content: '';
+    display: block;
+    position: absolute;
+    left: u(4.4rem);
+    bottom: u(-.7rem);
+  }
+
+  &.tooltip--left {
+    width: u(30rem);
+    left: u(-2rem);
+
+    &::before {
+      left: u(2rem);
+    }
+
+    &::after {
+      left: u(2.2rem);
+    }
+  }
+
+  &.tooltip--right {
+    width: u(30rem);
+    left: auto;
+    right: u(-3rem);
+
+    &::before {
+      left: auto;
+      right: u(2.8rem);
+    }
+    &::after {
+      left:auto;
+      right: u(3rem);
+    }
+  }
+
+}
+
 
 .tooltip__container {
   width: u(2rem);
@@ -161,9 +256,10 @@
   background-size: contain;
   cursor: pointer;
   display: inline-block;
-  height: 1.5em;
+  height: u(1.8rem);
   vertical-align: middle;
-  width: 1.5em;
+  width: u(1.8rem);
+  margin: u(0 0 .5rem .3rem);
 
   &:hover + .tooltip,
   &:focus + .tooltip {
diff --git a/fec/home/templates/partials/legal-keyword-modal.html b/fec/home/templates/partials/legal-keyword-modal.html
index 5de2ff9c22..aa01a6dfe5 100644
--- a/fec/home/templates/partials/legal-keyword-modal.html
+++ b/fec/home/templates/partials/legal-keyword-modal.html
@@ -1,11 +1,12 @@
 <div class="js-keyword-modal modal" id="keyword-modal" aria-hidden="true">
   <div tabindex="-1" class="modal__overlay" data-a11y-dialog-hide></div>
   <div role="dialog" class="modal__content" aria-labelledby="spending-modal-title">
-    <div role="document">
+    <div role="document" class="keyword-modal">
       <button type="button" class="modal__close button--close--primary" data-a11y-dialog-hide title="Close this dialog window"></button>
       <h2 id="spending-modal-title" class="heading--section">Find documents with...</h2>
       <div class="row u-padding--top">
-        <form class="modal__form" action="/data/legal/search/">
+        <form class="modal__form  search-controls__either" action="/data/legal/search/">
+          <p>Use these search boxes to refine your search:</p>
           <div class="filter">
             <label class="label" for="keywords-any">Any of these words</label>
             <input type="text" id="keywords-any" data-operator="or">
@@ -29,9 +30,9 @@ <h2 id="spending-modal-title" class="heading--section">Find documents with...</h
             <button class="u-margin--top button button--cta button--search--text" type="submit">Search</button>
           </div>
         </form>
-        <div class="modal__tips">
-          <h3>Search tips</h3>
-          <p>Complex keyword searches can be created without using these special fields.</p>
+        <div class="search-controls__or search-controls__or--vertical">or</div>
+
+        <div class="modal__tips search-controls__either">
           <p>Use these symbols in the main search box:</p>
           <table class="simple-table">
             <thead class="simple-table__header">
diff --git a/fec/legal/templates/macros/legal.jinja b/fec/legal/templates/macros/legal.jinja
index 83fcd22bfe..15de61538a 100644
--- a/fec/legal/templates/macros/legal.jinja
+++ b/fec/legal/templates/macros/legal.jinja
@@ -1,6 +1,12 @@
 {% macro keyword_search(result_type, query) %}
 <div class="filter">
-  <label class="label" for="search-input">Search keywords</label>
+  <label class="label t-inline-block" for="search-input">Search keywords</label>
+  <div class="tooltip__container">
+   <button class="tooltip__trigger"><span class="u-visually-hidden">Learn more</span></button>
+   <div class="tooltip tooltip--left tooltip--above">
+     <p class="tooltip__content tooltip__content">Refine a keyword search by using AND, OR, “ ”, -, to expand or limit results.</p>
+   </div>
+  </div>
   <div class="combo combo--search--mini">
     <input id="search-input" type="text" name="search" class="combo__input"{% if query %} value="{{ query }}"{% endif %}>
     <button class="combo__button button--search button--standard" type="submit">
diff --git a/fec/legal/templates/partials/legal-keyword-modal.jinja b/fec/legal/templates/partials/legal-keyword-modal.jinja
index f2a260ce87..a7dbf65952 100644
--- a/fec/legal/templates/partials/legal-keyword-modal.jinja
+++ b/fec/legal/templates/partials/legal-keyword-modal.jinja
@@ -1,11 +1,12 @@
 <div class="js-keyword-modal modal" id="keyword-modal" aria-hidden="true">
   <div tabindex="-1" class="modal__overlay" data-a11y-dialog-hide></div>
   <div role="dialog" class="modal__content" aria-labelledby="spending-modal-title">
-    <div role="document">
+    <div role="document" class="keyword-modal">
       <button type="button" class="modal__close button--close--primary" data-a11y-dialog-hide title="Close this dialog window"></button>
       <h2 id="spending-modal-title" class="heading--section">Find documents with...</h2>
       <div class="row u-padding--top">
-        <form class="modal__form" action="">
+        <form class="modal__form  search-controls__either" action="">
+          <p>Use these search boxes to refine your search:</p>
           <div class="filter">
             <label class="label" for="keywords-any">Any of these words</label>
             <input type="text" id="keywords-any" data-operator="or">
@@ -28,9 +29,10 @@
             <button class="u-margin--top button button--cta button--search--text" type="submit">Search</button>
           </div>
         </form>
-        <div class="modal__tips">
-          <h3>Search tips</h3>
-          <p>Complex keyword searches can be created without using these special fields.</p>
+
+        <div class="search-controls__or search-controls__or--vertical">or</div>
+
+        <div class="modal__tips search-controls__either">
           <p>Use these symbols in the main search box:</p>
           <table class="simple-table">
             <thead class="simple-table__header">