introduce adjust_container_left_position option in help_instructions configuration

src/dom.js

@@ -36,7 +36,7 @@ export const getFirstTextNode = (node) => {
 
 /**
  * Creates an html element with given collection of attributes
- * @param  {String} tag a string of the html tag to create
+ * @param  {String} tag html tag name
  * @param  {Array} an undetermined number of arrays containing the with 2
  *                    items, the attribute name and its value ['id','myId']
  * @return {Object}     created element

src/modules/help.js

@@ -4,7 +4,7 @@ import {addEvt, targetEvt, removeEvt} from '../event';
 import {NONE} from '../const';
 import {root} from '../root';
 import {isEmpty, isNull} from '../types';
-import {defaultsStr} from '../settings';
+import {defaultsStr, defaultsNb} from '../settings';
 import {RIGHT} from './toolbar';
 
 const WIKI_URL = 'https://github.com/koalyptus/TableFilter/wiki/' +
@@ -92,6 +92,15 @@ export class Help extends Feature {
          */
         this.cont = null;
 
+        /**
+         * Adjust container left position when table's horizontal scroll is
+         * on, typically when `responsive` option is enabled.
+         * @type {Number}
+         * @defaultValue 25
+         */
+        this.contAdjustLeftPosition =
+            defaultsNb(f.container_adjust_left_position, 25);
+
         /**
          * Bound mouseup wrapper
          * @private
@@ -214,9 +223,20 @@ export class Help extends Feature {
         let divDisplay = this.cont.style.display;
         if (divDisplay === '' || divDisplay === NONE) {
             this.cont.style.display = 'inline';
+
+            // if table element has an horizontal scrollbar adjust container
+            // left position accordingly
+            if (this.tf.dom().scrollLeft > 0) {
+                this.cont.style.left = `${
+                    this.btn.offsetLeft
+                    - this.tf.dom().scrollLeft
+                    + this.contAdjustLeftPosition
+                }px`;
+            }
             addEvt(root, 'mouseup', this.boundMouseup);
         } else {
             this.cont.style.display = NONE;
+            this.cont.style.left = '';
         }
     }