.demo{ text-align: center; } .toolTip{ color: #333; font-family: 'Alice', cursive; font-size: 20px; font-weight: 500; border-bottom: 2px dashed #e84393; cursor: pointer; display: inline-block; position: relative; transition: all 0.3s ease 0s; } .toolTip:hover{ color: #e84393; } .toolTip:after{ content: attr(data-tip); color: #333; font-size: 14px; font-weight: 500; height: auto; width: 200px; padding: 7px 10px; opacity: 0; visibility: hidden; z-index: 1; transition: all 0.3s ease 0s; } .toolTip:hover:after{ opacity: 1; visibility: visible; } .toolTip.top:after{ background: linear-gradient(#fff, #e7e7e7); border-radius: 0 0 40px 40px; transform: translateX(-50%) scaleY(0.5); transform-origin: bottom center; position: absolute; left: 50%; bottom: 0; } .toolTip.top:hover:after{ transform: translateX(-50%) scaleY(1); bottom: 110%; } .toolTip.right:after{ background: linear-gradient(to left,#fff, #e7e7e7); border-radius: 40px 0 0 40px; transform: translateY(50%) scaleX(0.5); transform-origin: left center; position: absolute; left: 0; bottom: 50%; } .toolTip.right:hover:after{ transform: translateY(50%) scaleX(1); left: 110%; } .toolTip.bottom:after{ background: linear-gradient(to top, #fff, #e7e7e7); border-radius: 40px 40px 0 0; transform: translateX(-50%) scaleY(0.5); transform-origin: top center; position: absolute; left: 50%; top: 0; } .toolTip.bottom:hover:after{ transform: translateX(-50%) scaleY(1); top: 110%; } .toolTip.left:after{ background: linear-gradient(to right, #fff, #e7e7e7); border-radius: 0 40px 40px 0; transform: translateY(50%) scaleX(0.5); transform-origin: right center; position: absolute; right: 0; bottom: 50%; } .toolTip.left:hover:after{ right: 110%; transform: translateY(50%) scaleX(1); } @media only screen and (max-width: 767px) { .toolTip{ margin: 0 0 20px; } }