.tooltip { position: fixed; --color: #664f73; z-index: 100; }
.tooltip > .tt-content { background: var(--color); color: #fff; border-radius: 4px; padding: 8px; box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.2); }
.tooltip > .tt-arrow { position: absolute; height: 20px; width: 20px; }

.tooltip.side-bottom { }
.tooltip.side-bottom > .tt-arrow { top: -20px; border-bottom: 10px solid var(--color); }

.tooltip.side-top { }
.tooltip.side-top > .tt-arrow { bottom: -20px; border-top: 10px solid var(--color); }

.tooltip.side-bottom > .tt-arrow,
.tooltip.side-top > .tt-arrow { left: calc(50% - 10px); border-left: 10px solid transparent; border-right: 10px solid transparent;  }

.tooltip.side-left { }
.tooltip.side-left > .tt-arrow { right: -20px; border-left: 10px solid var(--color); }

.tooltip.side-right { }
.tooltip.side-right > .tt-arrow { left: -20px; border-right: 10px solid var(--color); }

.tooltip.side-left > .tt-arrow,
.tooltip.side-right > .tt-arrow { top: calc(50% - 10px); border-top: 10px solid transparent; border-bottom: 10px solid transparent; }