Merge pull request #1009 from LibraryOfCongress/activity-ui-asset-lis…

…t-info-tooltip-overhaul Basic Popper.js re-implementation of asset tooltips
LibraryOfCongress · May 28, 2019 · 8beffc8 · 8beffc8
2 parents f22f831 + b41a09e
commit 8beffc8
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 6 deletions.
diff --git a/concordia/static/js/action-app/components.js b/concordia/static/js/action-app/components.js
@@ -1,4 +1,4 @@
-/* global jQuery, OpenSeadragon */
+/* global jQuery, OpenSeadragon, Popper */
 
 import {$, $$} from './utils/dom.js';
 
@@ -369,18 +369,23 @@ export class AssetList extends List {
     setupTooltip(getAssetData) {
         /* Tooltips */
         let tooltip = new AssetTooltip();
+        let popper;
 
         const handleTooltipShowEvent = event => {
             let target = event.target;
             if (target && target.classList.contains('asset')) {
                 const asset = getAssetData(target.dataset.id);
                 tooltip.update(asset);
                 mount(target, tooltip);
+                popper = new Popper(target, tooltip.el, {
+                    placement: 'bottom'
+                });
             }
         };
 
         const handleTooltipHideEvent = () => {
             if (tooltip.el.parentNode) {
+                popper.destroy();
                 unmount(tooltip.el.parentNode, tooltip);
             }
         };

diff --git a/concordia/static/scss/action-app.scss b/concordia/static/scss/action-app.scss
@@ -133,8 +133,13 @@ main {
         transition-property: height, width;
         transition-duration: 0.1s;
 
+        &:hover {
+            outline: 2px solid $blue;
+            outline-offset: -2px;
+        }
+
         &.asset-active {
-            outline: 2px auto $orange;
+            outline: 2px solid $orange;
             outline-offset: -2px;
         }
 
@@ -181,15 +186,23 @@ main {
     }
 
     .asset-tooltip {
+        width: calc(100% + ($asset-thumbnail-gap * 2));
+        height: calc(100% + ($asset-thumbnail-gap * 2));
+
         margin: $asset-thumbnail-gap * -1;
         padding: 14px;
+
+        border: $border-width solid $gray-600;
+
+        overflow: hidden;
+
+        pointer-events: none;
+
         background-color: $white;
+
         font-size: $concordia-app-font-size-xs;
         line-height: $concordia-app-line-height-xs;
-        pointer-events: none;
-        overflow: hidden;
-        width: calc(100% + ($asset-thumbnail-gap * 2));
-        height: calc(100% + ($asset-thumbnail-gap * 2));
+
         .item-title {
             font-weight: bold;
             margin-bottom: 1rem;