Merge pull request ABI-Software#102 from akhuoa/bugfix/fullscreen-too…

…ltips

Fullscreen tooltips fix

src/components/SearchFilters.vue

@@ -15,10 +15,7 @@
         placement="bottom-start"
         :width="200"
         trigger="hover"
-        :teleported="false"
         popper-class="cascade-tags-popover"
-        ref="cascadeTagsPopover"
-        @show="onCascadeTagsPopoverShown"
       >
         <template #default>
           <div class="el-tags-container">
@@ -63,15 +60,13 @@
           @expand-change="cascadeExpandChange"
           :show-all-levels="true"
           popper-class="sidebar-cascader-popper"
-          :teleported="false"
         />
         <div v-if="showFiltersText" class="filter-default-value">Filters</div>
         <el-popover
           title="How do filters work?"
           width="250"
           trigger="hover"
-          popper-class="popover"
-          :teleported="false"
+          popper-class="filter-help-popover"
         >
           <template #reference>
             <MapSvgIcon icon="help" class="help" />
@@ -96,7 +91,6 @@
         v-model="numberShown"
         placeholder="10"
         @change="numberShownChanged($event)"
-        :teleported="false"
       >
         <el-option
           v-for="item in numberDatasetsShown"
@@ -750,7 +744,7 @@ export default {
     /*
      * Given a filter, the function below returns the filter in the format of the cascader, returns false if facet is not found
      */
-    validateAndConvertFilterToHierarchical: function (filter) {    
+    validateAndConvertFilterToHierarchical: function (filter) {
       if (filter && filter.facet && filter.term) {
         // Convert terms to lower case.
         // Flatmap gives us Inferior vagus X ganglion but the term in Algolia
@@ -803,22 +797,6 @@ export default {
       }
       return []
     },
-    onCascadeTagsPopoverShown: function () {
-      const cascadeTagsPopover = this.$refs.cascadeTagsPopover;
-      const cascader = this.$refs.cascader;
-
-      if (cascader && cascadeTagsPopover) {
-        const cascaderZIndex = cascader.contentRef?.style.zIndex;
-        const cascaderTagZIndex = (cascaderZIndex * 1) + 1;
-        const cascadeTagsPopoverContentRef = cascadeTagsPopover.popperRef?.contentRef;
-
-        if (cascadeTagsPopoverContentRef) {
-          const cascaderTag = cascadeTagsPopoverContentRef.closest('.cascader-tag');
-          cascadeTagsPopoverContentRef.style.zIndex = cascaderTagZIndex;
-          cascaderTag.style.zIndex = cascaderTagZIndex;
-        }
-      }
-    },
   },
   mounted: function () {
     this.algoliaClient = markRaw(new AlgoliaClient(
@@ -964,10 +942,6 @@ export default {
   background: #f3ecf6;
   border-color: $app-primary-color;
 }
-
-:deep(.cascade-tags-popover) {
-  position: fixed !important;
-}
 </style>
 
 <style lang="scss">
@@ -982,7 +956,6 @@ export default {
   color: #292b66;
   text-align: center;
   padding-bottom: 6px;
-  position: fixed !important;
 }
 
 .sidebar-cascader-popper .el-cascader-node.is-active {
@@ -1024,4 +997,30 @@ export default {
   background-color: $app-primary-color;
   border-color: $app-primary-color;
 }
+
+.filter-help-popover {
+  color: rgb(48, 49, 51);
+  font-family: Asap;
+  margin: 12px;
+}
+
+.filter-help-popover,
+.cascade-tags-popover {
+  background: #f3ecf6 !important;
+  border: 1px solid $app-primary-color !important;
+  border-radius: 4px !important;
+  color: #303133 !important;
+  font-size: 12px !important;
+  line-height: 18px !important;
+
+  .el-popper__arrow::before {
+    background: #f3ecf6 !important;
+    border-color: $app-primary-color !important;
+  }
+
+  &[data-popper-placement^=bottom] .el-popper__arrow:before {
+    border-bottom-color: transparent !important;
+    border-right-color: transparent !important;
+  }
+}
 </style>

src/components/SearchHistory.vue

@@ -13,7 +13,6 @@
             <el-popover
               width="auto"
               trigger="hover"
-              :teleported="false"
               :show-after="200"
               :persistent="false"
               popper-class="popover-dropdown"
@@ -36,9 +35,6 @@
     <el-dropdown
       trigger="click"
       :hide-on-click="false"
-      :teleported="false"
-      class="search-history-dropdown"
-      popper-class="search-history-dropdown__popper"
     >
       <span class="el-dropdown-select">
         Search history
@@ -54,7 +50,6 @@
                 <el-popover
                   width="auto"
                   trigger="hover"
-                  :teleported="false"
                   :show-after="200"
                   :persistent="false"
                   popper-class="popover-dropdown"
@@ -77,7 +72,6 @@
               <el-popover
                 width="auto"
                 trigger="hover"
-                :teleported="false"
                 :show-after="200"
                 :persistent="false"
                 popper-class="popover-dropdown"
@@ -118,7 +112,6 @@
               <el-popover
                 width="auto"
                 trigger="hover"
-                :teleported="false"
                 :show-after="200"
                 :persistent="false"
                 popper-class="popover-dropdown"
@@ -430,7 +423,6 @@ export default {
   align-items: center;
   justify-content: space-between;
   padding-bottom: 6px;
-  z-index: 2;
 }
 
 .empty-saved-search {
@@ -548,10 +540,6 @@ export default {
     margin: 0;
   }
 }
-
-:deep(.search-history-dropdown__popper) {
-  position: fixed !important;
-}
 </style>
 
 <style lang="scss">
@@ -608,11 +596,9 @@ export default {
   max-width: 240px;
   font-family: Asap;
   font-size: 12px;
-  white-space: normal;
   word-break: break-word;
   text-align: left;
   color: inherit;
-  position: fixed !important;
   background: #f3ecf6 !important;
   border: 1px solid $app-primary-color;
 

src/components/SidebarContent.vue

@@ -588,7 +588,6 @@ export default {
   overflow-y: scroll;
   scrollbar-width: thin;
   border-radius: var(--el-border-radius-base);
-  z-index: 1;
 }
 
 .content :deep(.el-loading-spinner .path) {