canvas#corpus-map { position: absolute; -webkit-box-sizing: border-box; box-sizing: border-box; top: 0; left: 0; z-index: 0; } canvas#corpus-map.de-activated { background-color: #f4f4f4; } div.node-popup { z-index: 10; position: absolute; -webkit-box-sizing: content-box; box-sizing: content-box; width: 300px; min-height: 30px; pointer-events: none; top: 60%; left: 30%; pointer-events: none; } div.node-popup .inner { padding: 1em; outline: 1px solid red; background-color: white; } div.node-popup:before { content: ""; position: absolute; width: 60px; height: 0; border-top: 1px solid red; } div.node-popup[pos="bottom-right"] { -webkit-transform: translateY(42px) translateX(42px); transform: translateY(42px) translateX(42px); } div.node-popup[pos="bottom-right"]:before { top: -1px; left: -61px; -webkit-transform-origin: bottom right; transform-origin: bottom right; -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); } div.node-popup[pos="bottom-left"] { -webkit-transform: translateX(-100%) translateY(42px) translateX(-42px); transform: translateX(-100%) translateY(42px) translateX(-42px); } div.node-popup[pos="bottom-left"]:before { top: calc(100% +1px); left: 100%; -webkit-transform-origin: top left; transform-origin: top left; -webkit-transform: rotateZ(-45deg); transform: rotateZ(-45deg); } div.node-popup[pos="top-left"] { -webkit-transform: translateY(-100%) translateX(-100%) translateY(-42px) translateX(-42px); transform: translateY(-100%) translateX(-100%) translateY(-42px) translateX(-42px); } div.node-popup[pos="top-left"]:before { bottom: 0; left: 100%; -webkit-transform-origin: top left; transform-origin: top left; -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); } div.node-popup[pos="top-right"] { -webkit-transform: translateY(-100%) translateY(-42px) translateX(42px); transform: translateY(-100%) translateY(-42px) translateX(42px); } div.node-popup[pos="top-right"]:before { top: calc(100% + 1px); left: -61px; -webkit-transform-origin: top right; transform-origin: top right; -webkit-transform: rotateZ(-45deg); transform: rotateZ(-45deg); }