diff --git a/concordia/static/js/action-app/components.js b/concordia/static/js/action-app/components.js index b2339a82d..97c802c60 100644 --- 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,6 +369,7 @@ export class AssetList extends List { setupTooltip(getAssetData) { /* Tooltips */ let tooltip = new AssetTooltip(); + let popper; const handleTooltipShowEvent = event => { let target = event.target; @@ -376,11 +377,15 @@ export class AssetList extends List { 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 index d96ba95c3..d1a29e2f4 100644 --- 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;