.control-global{ width: 27px; height: 27px; border: 1px solid #303030; box-sizing: border-box; transition: border 0.25s; } .animated:hover{ border: 3px solid #303030; cursor: pointer; } .control-global:hover~.tooltiptext{ visibility: visible; opacity: 1; transition-delay: 2s; } .control-global-active{ display: block; } .control-global-inactive{ display: none; } .tooltip { position: relative; display: inline-block; } .tooltiptext { visibility:hidden; opacity: 0; background-color:gray; color: #fff; text-align: center; padding: 2px 0; border-radius: 6px; width: 130px; height: 20px; right: 100%; top:3px; position: absolute; z-index: 1; transition: opacity 0.25s; }