From 19bf53e1b941c292015c824c164ebab6b45d4497 Mon Sep 17 00:00:00 2001
From: john carroll <jcarroll@fec.gov>
Date: Tue, 4 Dec 2018 21:28:33 -0500
Subject: [PATCH 1/7] changes to keyword modal and add WIP tooltip

---
 fec/fec/static/js/legal/filters/TextFilter.js |  6 +++
 fec/fec/static/js/legal/filters/Tooltip.js    | 47 +++++++++++++++++
 .../static/js/legal/filters/TooltipHelp.js    | 47 +++++++++++++++++
 .../scss/components/_search-controls.scss     | 52 ++++++++++++++++++-
 .../partials/legal-keyword-modal.html         |  2 +-
 .../partials/legal-keyword-modal.jinja        | 12 +++--
 6 files changed, 159 insertions(+), 7 deletions(-)
 create mode 100644 fec/fec/static/js/legal/filters/Tooltip.js
 create mode 100644 fec/fec/static/js/legal/filters/TooltipHelp.js

diff --git a/fec/fec/static/js/legal/filters/TextFilter.js b/fec/fec/static/js/legal/filters/TextFilter.js
index 2839f37984..e89544523d 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,6 +10,8 @@ function TextFilter(props) {
   }
 
   return (
+    <div>
+    <TooltipHelp message={'Hello, I am a super cool tooltip'} position={'top'}></TooltipHelp>
     <div className="filter">
       <label className="label" htmlFor={props.name + '-filter'}>
         {props.label}
@@ -43,6 +46,7 @@ function TextFilter(props) {
         <span className="t-note t-sans search__example">{props.helpText}</span>
       )}
     </div>
+    </div>
   );
 }
 
@@ -51,6 +55,7 @@ TextFilter.defaultProps = {
   handleChange: function() {},
   helpText: 'help',
   keywordModal: true,
+  TooltipHelp : false,
   name: 'name',
   value: ''
 };
@@ -60,6 +65,7 @@ TextFilter.propTypes = {
   handleChange: PropTypes.func,
   helpText: PropTypes.string,
   keywordModal: PropTypes.bool,
+  TooltipHelp : PropTypes.bool,
   name: PropTypes.string,
   value: PropTypes.string
 };
diff --git a/fec/fec/static/js/legal/filters/Tooltip.js b/fec/fec/static/js/legal/filters/Tooltip.js
new file mode 100644
index 0000000000..7611f938ce
--- /dev/null
+++ b/fec/fec/static/js/legal/filters/Tooltip.js
@@ -0,0 +1,47 @@
+const React = require('react');
+const PropTypes = require('prop-types')
+
+class Tooltip extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      displayTooltip: false
+    }
+    this.hideTooltip = this.hideTooltip.bind(this)
+    this.showTooltip = this.showTooltip.bind(this)
+  }
+
+  hideTooltip () {
+    this.setState({displayTooltip: false})
+
+  }
+  showTooltip () {
+    this.setState({displayTooltip: true})
+  }
+
+  render() {
+    let message = this.props.message
+    let position = this.props.position
+    return (
+      <div className="tooltip__container">
+      <button className="tooltip__trigger"
+          onMouseOver={this.showTooltip} onMouseLeave={this.hideTooltip}
+        >
+        {this.state.displayTooltip &&
+        <div className={`u--margin-top tooltip--under tooltip--left tooltip-${position}`}>
+          <p className="tooltip__content">{message}</p>
+        </div>
+        }
+        {this.props.children}
+        </button>
+        </div>
+    )
+  }
+}
+
+
+
+
+
+module.exports = Tooltip;
\ No newline at end of file
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..47344c1d7a
--- /dev/null
+++ b/fec/fec/static/js/legal/filters/TooltipHelp.js
@@ -0,0 +1,47 @@
+const React = require('react');
+const PropTypes = require('prop-types')
+
+class TooltipHelp extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      displayTooltip: false
+    }
+    this.hideTooltip = this.hideTooltip.bind(this)
+    this.showTooltip = this.showTooltip.bind(this)
+  }
+
+  hideTooltip () {
+    this.setState({displayTooltip: false})
+
+  }
+  showTooltip () {
+    this.setState({displayTooltip: true})
+  }
+
+  render() {
+    let message = this.props.message
+    let position = this.props.position
+    return (
+      <div className="tooltip__container">
+      <button className="tooltip__trigger"
+          onMouseOver={this.showTooltip} onMouseLeave={this.hideTooltip}
+        >
+        {this.state.displayTooltip &&
+        <div className={`tooltip--under tooltip--left tooltip-${position}`}>
+          <p className="tooltip__content">{message}</p>
+        </div>
+        }
+        {this.props.children}
+        </button>
+        </div>
+    )
+  }
+}
+
+
+
+
+
+module.exports = TooltipHelp;
\ No newline at end of file
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/home/templates/partials/legal-keyword-modal.html b/fec/home/templates/partials/legal-keyword-modal.html
index 5de2ff9c22..4c83713636 100644
--- a/fec/home/templates/partials/legal-keyword-modal.html
+++ b/fec/home/templates/partials/legal-keyword-modal.html
@@ -3,7 +3,7 @@
   <div role="dialog" class="modal__content" aria-labelledby="spending-modal-title">
     <div role="document">
       <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>
+      <h2 id="spending-modal-title" class="heading--section">Find documents withZ...</h2>
       <div class="row u-padding--top">
         <form class="modal__form" action="/data/legal/search/">
           <div class="filter">
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">

From 2de90b5bec01e1d4a1ed2ed40fdb6b8bfd238c33 Mon Sep 17 00:00:00 2001
From: john carroll <jcarroll@fec.gov>
Date: Thu, 6 Dec 2018 11:07:50 -0500
Subject: [PATCH 2/7] make tooltip reusable

---
 fec/fec/static/js/legal/Filters.js            |  3 ++
 fec/fec/static/js/legal/filters/TextFilter.js | 13 +++--
 fec/fec/static/js/legal/filters/Tooltip.js    | 47 -------------------
 .../static/js/legal/filters/TooltipHelp.js    | 34 +++-----------
 fec/legal/templates/macros/legal.jinja        |  8 +++-
 5 files changed, 25 insertions(+), 80 deletions(-)
 delete mode 100644 fec/fec/static/js/legal/filters/Tooltip.js

diff --git a/fec/fec/static/js/legal/Filters.js b/fec/fec/static/js/legal/Filters.js
index 736dbdd7fb..b2ca95c08c 100644
--- a/fec/fec/static/js/legal/Filters.js
+++ b/fec/fec/static/js/legal/Filters.js
@@ -53,6 +53,9 @@ 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:'under',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 e89544523d..f838f03a8e 100644
--- a/fec/fec/static/js/legal/filters/TextFilter.js
+++ b/fec/fec/static/js/legal/filters/TextFilter.js
@@ -11,11 +11,13 @@ function TextFilter(props) {
 
   return (
     <div>
-    <TooltipHelp message={'Hello, I am a super cool tooltip'} position={'top'}></TooltipHelp>
     <div className="filter">
-      <label className="label" htmlFor={props.name + '-filter'}>
+      <label className="label t-inline-block" htmlFor={props.name + '-filter'}>
         {props.label}
       </label>
+      {props.TooltipHelp.addTooltip &&
+      <TooltipHelp  message={props.TooltipHelp.message} verticalPosition={props.TooltipHelp.verticalPosition} horizontalPosition={props.TooltipHelp.horizontalPosition}></TooltipHelp>
+       }
       <div className="combo combo--search--mini">
         <input
           id={props.name + '-filter'}
@@ -48,14 +50,15 @@ function TextFilter(props) {
     </div>
     </div>
   );
+
 }
 
 TextFilter.defaultProps = {
   getResults: function() {},
   handleChange: function() {},
-  helpText: 'help',
+  helpText: '',
   keywordModal: true,
-  TooltipHelp : false,
+  TooltipHelp:{},
   name: 'name',
   value: ''
 };
@@ -65,7 +68,7 @@ TextFilter.propTypes = {
   handleChange: PropTypes.func,
   helpText: PropTypes.string,
   keywordModal: PropTypes.bool,
-  TooltipHelp : PropTypes.bool,
+  TooltipHelp: PropTypes.object,
   name: PropTypes.string,
   value: PropTypes.string
 };
diff --git a/fec/fec/static/js/legal/filters/Tooltip.js b/fec/fec/static/js/legal/filters/Tooltip.js
deleted file mode 100644
index 7611f938ce..0000000000
--- a/fec/fec/static/js/legal/filters/Tooltip.js
+++ /dev/null
@@ -1,47 +0,0 @@
-const React = require('react');
-const PropTypes = require('prop-types')
-
-class Tooltip extends React.Component {
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      displayTooltip: false
-    }
-    this.hideTooltip = this.hideTooltip.bind(this)
-    this.showTooltip = this.showTooltip.bind(this)
-  }
-
-  hideTooltip () {
-    this.setState({displayTooltip: false})
-
-  }
-  showTooltip () {
-    this.setState({displayTooltip: true})
-  }
-
-  render() {
-    let message = this.props.message
-    let position = this.props.position
-    return (
-      <div className="tooltip__container">
-      <button className="tooltip__trigger"
-          onMouseOver={this.showTooltip} onMouseLeave={this.hideTooltip}
-        >
-        {this.state.displayTooltip &&
-        <div className={`u--margin-top tooltip--under tooltip--left tooltip-${position}`}>
-          <p className="tooltip__content">{message}</p>
-        </div>
-        }
-        {this.props.children}
-        </button>
-        </div>
-    )
-  }
-}
-
-
-
-
-
-module.exports = Tooltip;
\ No newline at end of file
diff --git a/fec/fec/static/js/legal/filters/TooltipHelp.js b/fec/fec/static/js/legal/filters/TooltipHelp.js
index 47344c1d7a..b8fd64143f 100644
--- a/fec/fec/static/js/legal/filters/TooltipHelp.js
+++ b/fec/fec/static/js/legal/filters/TooltipHelp.js
@@ -4,38 +4,18 @@ const PropTypes = require('prop-types')
 class TooltipHelp extends React.Component {
   constructor(props) {
     super(props)
-
-    this.state = {
-      displayTooltip: false
-    }
-    this.hideTooltip = this.hideTooltip.bind(this)
-    this.showTooltip = this.showTooltip.bind(this)
-  }
-
-  hideTooltip () {
-    this.setState({displayTooltip: false})
-
+    this.state = { enableTooltip: props.addTooltip}
   }
-  showTooltip () {
-    this.setState({displayTooltip: true})
-  }
-
   render() {
-    let message = this.props.message
-    let position = this.props.position
+
     return (
       <div className="tooltip__container">
-      <button className="tooltip__trigger"
-          onMouseOver={this.showTooltip} onMouseLeave={this.hideTooltip}
-        >
-        {this.state.displayTooltip &&
-        <div className={`tooltip--under tooltip--left tooltip-${position}`}>
-          <p className="tooltip__content">{message}</p>
-        </div>
-        }
+       <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">{this.props.message}</p>
+         </div>
         {this.props.children}
-        </button>
-        </div>
+      </div>
     )
   }
 }
diff --git a/fec/legal/templates/macros/legal.jinja b/fec/legal/templates/macros/legal.jinja
index 83fcd22bfe..ea7db503ca 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--under">
+     <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">

From 58a1ce9e84fcdfa4fc384ce665629e18e270bc81 Mon Sep 17 00:00:00 2001
From: john carroll <jcarroll@fec.gov>
Date: Thu, 6 Dec 2018 16:24:45 -0500
Subject: [PATCH 3/7] removed unused prop on react tooltip, fixed styling
 spacing on modal window and tooltip

---
 fec/fec/static/js/legal/filters/TooltipHelp.js      | 11 +----------
 fec/fec/static/scss/components/_modals.scss         |  8 ++++++++
 fec/fec/static/scss/components/_tooltips.scss       |  5 +++--
 .../templates/partials/legal-keyword-modal.html     | 13 +++++++------
 4 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/fec/fec/static/js/legal/filters/TooltipHelp.js b/fec/fec/static/js/legal/filters/TooltipHelp.js
index b8fd64143f..5da0201ffc 100644
--- a/fec/fec/static/js/legal/filters/TooltipHelp.js
+++ b/fec/fec/static/js/legal/filters/TooltipHelp.js
@@ -2,17 +2,12 @@ const React = require('react');
 const PropTypes = require('prop-types')
 
 class TooltipHelp extends React.Component {
-  constructor(props) {
-    super(props)
-    this.state = { enableTooltip: props.addTooltip}
-  }
   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">{this.props.message}</p>
+            <p className="tooltip--content tooltip__content">{this.props.message}</p>
          </div>
         {this.props.children}
       </div>
@@ -20,8 +15,4 @@ class TooltipHelp extends React.Component {
   }
 }
 
-
-
-
-
 module.exports = TooltipHelp;
\ No newline at end of file
diff --git a/fec/fec/static/scss/components/_modals.scss b/fec/fec/static/scss/components/_modals.scss
index 4f5b82a4b3..e44c4d9da5 100644
--- a/fec/fec/static/scss/components/_modals.scss
+++ b/fec/fec/static/scss/components/_modals.scss
@@ -52,3 +52,11 @@
   @include shift(1);
   padding-top: u(1rem);
 }
+
+.keyword-modal {
+  .simple-table{
+    border-width: 0 0;
+  }
+
+}
+
diff --git a/fec/fec/static/scss/components/_tooltips.scss b/fec/fec/static/scss/components/_tooltips.scss
index 6f95c3aa0d..3bfef685c2 100644
--- a/fec/fec/static/scss/components/_tooltips.scss
+++ b/fec/fec/static/scss/components/_tooltips.scss
@@ -161,9 +161,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 4c83713636..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 withZ...</h2>
+      <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 withZ...</
             <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">

From 06f626e834679ebfb40a66cf072f15c336ae329a Mon Sep 17 00:00:00 2001
From: john carroll <jcarroll@fec.gov>
Date: Thu, 6 Dec 2018 16:32:56 -0500
Subject: [PATCH 4/7] lint formatting fixes

---
 fec/fec/static/js/legal/Filters.js            | 10 ++-
 fec/fec/static/js/legal/filters/TextFilter.js | 82 ++++++++++---------
 .../static/js/legal/filters/TooltipHelp.js    | 22 +++--
 3 files changed, 67 insertions(+), 47 deletions(-)

diff --git a/fec/fec/static/js/legal/Filters.js b/fec/fec/static/js/legal/Filters.js
index b2ca95c08c..d7bfd4ea81 100644
--- a/fec/fec/static/js/legal/Filters.js
+++ b/fec/fec/static/js/legal/Filters.js
@@ -53,9 +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:'under',horizontalPosition:'left'}}
+            TooltipHelp={{
+              addTooltip: true,
+              message:
+                'Refine a keyword search by using AND, OR, “ ”, -, to expand or limit results.',
+              verticalPosition: 'under',
+              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 f838f03a8e..e1d708d1e3 100644
--- a/fec/fec/static/js/legal/filters/TextFilter.js
+++ b/fec/fec/static/js/legal/filters/TextFilter.js
@@ -11,46 +11,54 @@ function TextFilter(props) {
 
   return (
     <div>
-    <div className="filter">
-      <label className="label t-inline-block" htmlFor={props.name + '-filter'}>
-        {props.label}
-      </label>
-      {props.TooltipHelp.addTooltip &&
-      <TooltipHelp  message={props.TooltipHelp.message} verticalPosition={props.TooltipHelp.verticalPosition} horizontalPosition={props.TooltipHelp.horizontalPosition}></TooltipHelp>
-       }
-      <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 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>
     </div>
   );
-
 }
 
 TextFilter.defaultProps = {
@@ -58,7 +66,7 @@ TextFilter.defaultProps = {
   handleChange: function() {},
   helpText: '',
   keywordModal: true,
-  TooltipHelp:{},
+  TooltipHelp: {},
   name: 'name',
   value: ''
 };
diff --git a/fec/fec/static/js/legal/filters/TooltipHelp.js b/fec/fec/static/js/legal/filters/TooltipHelp.js
index 5da0201ffc..6f4f44c94f 100644
--- a/fec/fec/static/js/legal/filters/TooltipHelp.js
+++ b/fec/fec/static/js/legal/filters/TooltipHelp.js
@@ -1,18 +1,26 @@
 const React = require('react');
-const PropTypes = require('prop-types')
+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>
+        <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>
         {this.props.children}
       </div>
-    )
+    );
   }
 }
 
-module.exports = TooltipHelp;
\ No newline at end of file
+module.exports = TooltipHelp;

From b99c845be78f6bcd1635d31f3b9a9e92a9bfb67c Mon Sep 17 00:00:00 2001
From: john carroll <jcarroll@fec.gov>
Date: Tue, 11 Dec 2018 21:12:43 -0500
Subject: [PATCH 5/7] fix all tooltip positioning and comments on
 _tooltips.scss stylesheet

---
 fec/fec/static/js/legal/Filters.js            |   4 +-
 .../static/js/legal/filters/TooltipHelp.js    |   3 +-
 fec/fec/static/scss/components/_tooltips.scss | 155 ++++++++++++++----
 fec/legal/templates/macros/legal.jinja        |   2 +-
 4 files changed, 129 insertions(+), 35 deletions(-)

diff --git a/fec/fec/static/js/legal/Filters.js b/fec/fec/static/js/legal/Filters.js
index d7bfd4ea81..613af28142 100644
--- a/fec/fec/static/js/legal/Filters.js
+++ b/fec/fec/static/js/legal/Filters.js
@@ -57,8 +57,8 @@ function Filters(props) {
               addTooltip: true,
               message:
                 'Refine a keyword search by using AND, OR, “ ”, -, to expand or limit results.',
-              verticalPosition: 'under',
-              horizontalPosition: 'left'
+              verticalPosition: 'above',
+              horizontalPosition: 'center'
             }}
           />
           <CheckboxFilter
diff --git a/fec/fec/static/js/legal/filters/TooltipHelp.js b/fec/fec/static/js/legal/filters/TooltipHelp.js
index 6f4f44c94f..2fddec4929 100644
--- a/fec/fec/static/js/legal/filters/TooltipHelp.js
+++ b/fec/fec/static/js/legal/filters/TooltipHelp.js
@@ -13,11 +13,10 @@ class TooltipHelp extends React.Component {
             this.props.verticalPosition
           } tooltip--${this.props.horizontalPosition}`}
         >
-          <p className="tooltip--content tooltip__content">
+          <p className="tooltip__content tooltip__content">
             {this.props.message}
           </p>
         </div>
-        {this.props.children}
       </div>
     );
   }
diff --git a/fec/fec/static/scss/components/_tooltips.scss b/fec/fec/static/scss/components/_tooltips.scss
index 3bfef685c2..317f616a36 100644
--- a/fec/fec/static/scss/components/_tooltips.scss
+++ b/fec/fec/static/scss/components/_tooltips.scss
@@ -50,16 +50,51 @@
   }
 }
 
+
+
+// Tooltips under/over an element
+//
+// By default, this class centers a tooltip with the element it's referencing and centers the point.
+//
+// .tooltip--over or .tooltip--under -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);
diff --git a/fec/legal/templates/macros/legal.jinja b/fec/legal/templates/macros/legal.jinja
index ea7db503ca..15de61538a 100644
--- a/fec/legal/templates/macros/legal.jinja
+++ b/fec/legal/templates/macros/legal.jinja
@@ -3,7 +3,7 @@
   <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--under">
+   <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>

From 9ff12882cf2a78763a444f825e80effa157324cb Mon Sep 17 00:00:00 2001
From: john carroll <jcarroll@fec.gov>
Date: Tue, 11 Dec 2018 23:53:00 -0500
Subject: [PATCH 6/7] fix comment error on _tooltips.scss

---
 fec/fec/static/scss/components/_tooltips.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/fec/fec/static/scss/components/_tooltips.scss b/fec/fec/static/scss/components/_tooltips.scss
index 317f616a36..cefb41a7a0 100644
--- a/fec/fec/static/scss/components/_tooltips.scss
+++ b/fec/fec/static/scss/components/_tooltips.scss
@@ -52,11 +52,11 @@
 
 
 
-// Tooltips under/over an element
+// Tooltips under/above an element
 //
 // By default, this class centers a tooltip with the element it's referencing and centers the point.
 //
-// .tooltip--over or .tooltip--under -Required
+// .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.

From d53bd31e2835b232370a1ce2983cb5d504e4c803 Mon Sep 17 00:00:00 2001
From: john carroll <jcarroll@fec.gov>
Date: Mon, 17 Dec 2018 02:38:14 -0500
Subject: [PATCH 7/7] changed tooltip height/position and modal box max-height

---
 fec/fec/static/js/legal/Filters.js          | 2 +-
 fec/fec/static/scss/components/_modals.scss | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/fec/fec/static/js/legal/Filters.js b/fec/fec/static/js/legal/Filters.js
index 613af28142..d0060651ae 100644
--- a/fec/fec/static/js/legal/Filters.js
+++ b/fec/fec/static/js/legal/Filters.js
@@ -58,7 +58,7 @@ function Filters(props) {
               message:
                 'Refine a keyword search by using AND, OR, “ ”, -, to expand or limit results.',
               verticalPosition: 'above',
-              horizontalPosition: 'center'
+              horizontalPosition: 'left'
             }}
           />
           <CheckboxFilter
diff --git a/fec/fec/static/scss/components/_modals.scss b/fec/fec/static/scss/components/_modals.scss
index e44c4d9da5..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;
   }
 }