.demo{ text-align: center; } .toolTip{ color: #fff; background: #73a058; font-family: 'Raleway', sans-serif; font-size: 18px; font-weight: 700; letter-spacing: 1px; padding: 10px 20px; border-radius: 50%; border: 2px solid #73a058; position: relative; z-index: 1; transition: all 0.3s ease; } .toolTip:hover, .toolTip:focus{ color: #73a058; background-color: #fff; outline: none; } .toolTip:before, .toolTip:after{ content: attr(data-tip); color: #000; background: #fff; font-size: 13px; font-weight: 400; line-height: 18px; width: 155px; padding: 12px 10px; box-shadow: 1px 1px 10px 0 #ccc; white-space: pre-wrap; opacity: 0; visibility: hidden; transition: all 0.3s ease 0s; } .toolTip:after{ content: ''; padding: 0; height: 10px; width: 10px; box-shadow: none; } .toolTip:hover:before, .toolTip:hover:after{ opacity: 1; visibility: visible; } .toolTip.top:before, .toolTip.top:after{ transform: translateX(-50%); position: absolute; left: 50%; bottom: 250%; } .toolTip.top:after{ bottom: 238%; transform: translateX(-50%) rotate(45deg); } .toolTip.top:hover:before{ bottom: calc(100% + 15px); } .toolTip.top:hover:after{ bottom: calc(100% + 11px); } .toolTip.bottom:before, .toolTip.bottom:after{ transform: translateX(-50%); position: absolute; left: 50%; top: 250%; } .toolTip.bottom:after{ top: 238%; transform: translateX(-50%) rotate(45deg); } .toolTip.bottom:hover:before{ top: calc(100% + 15px); } .toolTip.bottom:hover:after{ top: calc(100% + 11px); } .toolTip.left:before, .toolTip.left:after{ transform: translateY(-50%); position: absolute; top: 50%; right: 150%; } .toolTip.left:after{ right: 147%; transform: translateY(-50%) rotate(45deg); } .toolTip.left:hover:before{ right: calc(100% + 15px); } .toolTip.left:hover:after{ right: calc(100% + 11px); } @media only screen and (max-width: 767px){ .toolTip{ margin: 0 0 20px; } }