Tooltip by neerajbaniwal
#212121
1.tooltip-container { 2 height: 70px; 3 width: 110px; 4 border-radius: 5px; 5 background-color: #fff; 6 background-image: linear-gradient( 7 to left bottom, 8 #f2f5f8, 9 #ecf1f2, 10 #e7eceb, 11 #e3e7e4, 12 #e1e2de 13 ); 14 border: 1px solid white; 15 display: flex; 16 align-items: center; 17 justify-content: center; 18 cursor: pointer; 19 box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.151); 20 position: relative; 21 transition: transform 0.3s ease; 22 z-index: 1; 23} 24 25.tooltip-container::before { 26 position: absolute; 27 content: ""; 28 top: -50%; 29 clip-path: polygon(50% 0, 0 100%, 100% 100%); 30 border-radius: 5px; 31 background-color: fff; 32 background-image: linear-gradient( 33 to left bottom, 34 #1288ff, 35 #e4eaec, 36 #d8dfde, 37 #cdd3cf, 38 #c5c7c1 39 ); 40 width: 100%; 41 height: 50%; 42 transform-style: preserve-3d; 43 transform: perspective(1000px) rotateX(-150deg) translateY(-110%); 44 transition: transform 0.3s ease; 45 z-index: -1; 46} 47 48.tooltip-container .text { 49 color: rgb(32, 30, 30); 50 font-weight: bold; 51 font-size: 40px; 52} 53 54.tooltip { 55 position: absolute; 56 top: -20px; 57 opacity: 0; 58 background: linear-gradient(-90deg, rgba(0, 0, 0, 0.05) 1px, white 1px), 59 linear-gradient(rgba(0, 0, 0, 0.05) 1px, white 1px), 60 linear-gradient(-90deg, rgba(0, 0, 0, 0.04) 1px, white 1px), 61 linear-gradient(rgba(0, 0, 0, 0.04) 1px, white 1px), 62 linear-gradient(white 3px, #f2f2f2 3px, #f2f2f2 78px, white 78px), 63 linear-gradient(-90deg, #aaa 1px, white 1px), 64 linear-gradient(-90deg, white 3px, #f2f2f2 3px, #f2f2f2 78px, white 78px), 65 linear-gradient(#aaa 1px, white 1px), #f2f2f2; 66 background-size: 4px 4px, 4px 4px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 67 80px 80px, 80px 80px; 68 padding: 5px 10px; 69 border: 1px solid rgb(206, 204, 204); 70 71 height: 70px; 72 width: 110px; 73 border-radius: 5px; 74 display: flex; 75 align-items: center; 76 justify-content: center; 77 transition-duration: 0.2s; 78 pointer-events: none; 79 letter-spacing: 0.5px; 80 font-size: 18px; 81 font-weight: 600; 82 text-shadow: 10px salmon; 83 z-index: ; 84} 85.tooltip-container:hover { 86 border-top-left-radius: 0; 87 border-top-right-radius: 0; 88} 89 90.tooltip-container:hover::before { 91 transform: rotateY(0); 92 background-image: none; 93 background-color: white; 94} 95 96.tooltip-container:hover .tooltip { 97 top: -90px; 98 opacity: 1; 99 transition-duration: 0.3s; 100} 101
1.8K views
MIT License