.tooltip-toggle { cursor: pointer; //position: relative; //Tooltip text container &::before { position: absolute; top: -30px; //left: -80px; background-color: #00ff00; border-radius: 5px; color: #fff; content: attr(aria-label); //This pulls in the text from the element with the tooltip padding: 1ex; text-transform: none; font-weight: bold; transition: all 0.5s ease; width: 160px; line-height: 16px; } //Tooltip arrow //&::after { // position: absolute; // top: -12px; // left: 9px; // border-left: 5px solid transparent; // border-right: 5px solid transparent; // border-top: 5px solid #2B222A; // content: " "; // font-size: 0; // line-height: 0; // margin-left: -5px; // width: 0; //} //Setting up the transition &::before, &::after { color: #efefef; font-family: monospace; font-size: 16px; opacity: 0; pointer-events: none; text-align: center; } //Triggering the transition &:focus::before, &:focus::after, &:hover::before, &:hover::after { opacity: 1; transition: all 0.75s ease; } }