Add option for position of popup for horizontal text

ext/bg/js/options.js

@@ -201,6 +201,7 @@ function optionsSetDefaults(options) {
             popupVerticalOffset: 10,
             popupHorizontalOffset2: 10,
             popupVerticalOffset2: 0,
+            popupHorizontalTextPosition: 'below',
             popupVerticalTextPosition: 'before',
             showGuide: true,
             compactTags: false,

ext/bg/js/settings.js

@@ -32,6 +32,7 @@ async function formRead() {
     optionsNew.general.showAdvanced = $('#show-advanced-options').prop('checked');
     optionsNew.general.maxResults = parseInt($('#max-displayed-results').val(), 10);
     optionsNew.general.popupDisplayMode = $('#popup-display-mode').val();
+    optionsNew.general.popupHorizontalTextPosition = $('#popup-horizontal-text-position').val();
     optionsNew.general.popupVerticalTextPosition = $('#popup-vertical-text-position').val();
     optionsNew.general.popupWidth = parseInt($('#popup-width').val(), 10);
     optionsNew.general.popupHeight = parseInt($('#popup-height').val(), 10);
@@ -171,6 +172,7 @@ async function onReady() {
     $('#show-advanced-options').prop('checked', options.general.showAdvanced);
     $('#max-displayed-results').val(options.general.maxResults);
     $('#popup-display-mode').val(options.general.popupDisplayMode);
+    $('#popup-horizontal-text-position').val(options.general.popupHorizontalTextPosition);
     $('#popup-vertical-text-position').val(options.general.popupVerticalTextPosition);
     $('#popup-width').val(options.general.popupWidth);
     $('#popup-height').val(options.general.popupHeight);

ext/bg/settings.html

@@ -107,6 +107,14 @@
                     </select>
                 </div>
 
+                <div class="form-group">
+                    <label for="popup-display-mode">Popup position for horizontal text</label>
+                    <select class="form-control" id="popup-horizontal-text-position">
+                        <option value="below">Below text</option>
+                        <option value="above">Above text</option>
+                    </select>
+                </div>
+
                 <div class="form-group">
                     <label for="popup-display-mode">Popup position for vertical text</label>
                     <select class="form-control" id="popup-vertical-text-position">

ext/fg/js/popup.js

@@ -91,13 +91,15 @@ class Popup {
             }
         }
 
+        const preferBelow = (optionsGeneral.popupHorizontalTextPosition === 'below');
+
         const verticalOffset = optionsGeneral.popupVerticalOffset;
         const [y, h, below] = Popup.limitGeometry(
             elementRect.top - verticalOffset,
             elementRect.bottom + verticalOffset,
             height,
             maxHeight,
-            true
+            preferBelow
         );
 
         return [x, y, width, h, below];