.simple-tooltip { pointer-events: none; } .simple-tooltip:active { pointer-events: none; } /* Show the tooltip if a older sibling is hovered */ *:hover ~ .simple-tooltip > .tooltip { opacity: 0.9; } /* Show the tooltip if parent is hovered */ *:hover > .simple-tooltip > .tooltip { opacity: 0.9; } .tooltip { opacity: 0; transition: opacity 200ms ease-in; font-size: 12px; line-height: 1; background-color: #616161; color: white; padding: 8px; border-radius: 2px; position: absolute; right: calc(100% + 8px); pointer-events: none; white-space: nowrap; } .tooltip.always { opacity: 0.9; }