/* Tooltips */ [data-hint] { position: relative; // display: inline-block; } [data-hint]::before, [data-hint]::after { position: absolute; will-change: transform; visibility: hidden; opacity: 0; z-index: 900005; pointer-events: none; transition: 0.2s ease; transition-delay: 0ms; } [data-hint]::before { content: ''; position: absolute; background: transparent; border: 6px solid transparent; z-index: 900006; } [data-hint]::after { content: attr(data-hint); background: #404040; color: #e0e0e0; text-shadow: 0 -1px 0 black; padding: 8px 10px; line-height: 12px; white-space: nowrap; border-radius: 2px; box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); letter-spacing: normal; font-size: 12px; font-weight: normal; font-style: inherit; font-family: 'Noto Sans', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif; } [data-hint]:hover::before, [data-hint]:hover::after { visibility: visible; opacity: 1; } .hint--bottom::before, .hint--bottom-left::before { border-bottom-color: #404040; } .hint--top::before, .hint--top-left::before { border-top-color: #404040; } .hint--bottom::before { margin-top: -12px; } .hint--bottom::after { margin-left: -18px; } .hint--bottom::before, .hint--bottom::after { top: 100%; left: 50%; } .hint--bottom:hover::after, .hint--bottom:hover::before { -webkit-transform: translateY(8px); transform: translateY(8px); } .hint--top::before { margin-bottom: -12px; } .hint--top::after { margin-left: -18px; } .hint--top::before, .hint--top::after { bottom: 100%; left: 50%; } .hint--top:hover::after, .hint--top:hover::before { -webkit-transform: translateY(-8px); transform: translateY(-8px); } .hint--top-left::before { margin-bottom: -12px; } .hint--top-left::after { margin-right: -6px; } .hint--top-left::before, .hint--top-left::after { bottom: 100%; right: 30%; } .hint--top-left:hover::after, .hint--top-left:hover::before { -webkit-transform: translateY(-8px); transform: translateY(-8px); } .hint--bottom-left::before { margin-top: -12px; } .hint--bottom-left::after { margin-right: -6px; } .hint--bottom-left::before, .hint--bottom-left::after { top: 100%; right: 30%; } .hint--bottom-left:hover::after, .hint--bottom-left:hover::before { -webkit-transform: translateY(8px); transform: translateY(8px); } .hint--left::before { margin-right: -12px; margin-top: -6px; } .hint--left::after { margin-right: -14px; } .hint--left::before, .hint--left::after { right: 100%; bottom: 50%; } .hint--left:hover::after, .hint--left:hover::before { -webkit-transform: translateX(-8px); transform: translateX(-8px); }