.lineHeight { line-height: 33%; } .tooltip { display: inline-block; position: relative; text-align: left; } .tooltip .bottom { min-width: 225px; max-width: 250px; top: 35px; right: 0px; /* transform: translate(-50%, 0); */ padding: 10px 10px; color: var(--black); background-color: var(--bg-2); font-weight: normal; font-size: 13px; border-radius: 8px; position: absolute; z-index: 99999999; box-sizing: border-box; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); border: 1px solid var(--black); visibility: hidden; opacity: 0; transition: opacity 0.2s; } .tooltip:hover .bottom { visibility: visible; opacity: 1; z-index: 100; } .tooltip .bottom i { position: absolute; bottom: 100%; left: 50%; margin-left: -12px; width: 24px; height: 12px; overflow: hidden; } .tooltip .bottom i::after { content: ''; position: absolute; width: 12px; height: 12px; left: 50%; transform: translate(-50%, 50%) rotate(45deg); background-color: var(--white); border: 1px solid var(--black); box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); }