.demo{ text-align: center; } .toolTip{ color: #006266; background: #fff; font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 500; line-height: 55px; height: 55px; width: 55px; padding: 0; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 0 15px rgba(0,0,0,0.2); position: relative; transition: all 0.3s ease 0s; } .toolTip:hover, .toolTip:focus{ color: #fff; background: #006266; outline: none; } .toolTip:before{ content: attr(data-tip); color: #006266; background: rgba(255,255,255,0.7); font-size: 13px; font-weight: 500; line-height: 18px; height: 80px; width: 80px; padding: 22px 10px; border: 3px solid #fff; border-radius: 50%; white-space: normal; opacity: 0; visibility: hidden; transition: all 0.3s ease-in-out; } .toolTip:hover:before{ opacity: 1; visibility: visible; } .toolTip.top:before{ transform: translateX(-50%) scale(0.5); position: absolute; left: 50%; bottom: 0; } .toolTip.top:hover:before{ transform: translateX(-50%) scale(1); bottom: 85%; } .toolTip.left:before{ transform: translateY(-50%) scale(0.5); position: absolute; top: 50%; right: 0; } .toolTip.left:hover:before{ transform: translateY(-50%) scale(1); right: 85%; } .toolTip.right:before{ transform: translateY(-50%) scale(0.5); position: absolute; top: 50%; left: 0; } .toolTip.right:hover:before{ transform: translateY(-50%) scale(1); left: 85%; } .toolTip.bottom:before{ transform: translateX(-50%) scale(0.5); position: absolute; left: 50%; top: 0; } .toolTip.bottom:hover:before{ transform: translateX(-50%) scale(1); top: 85%; } @media only screen and (max-width: 767px){ .toolTip{ margin: 0 0 20px; } }