Tooltip by TanimMahbub
#e8e8e8
1.wrapper { 2 display: flex; 3 gap: 10px; 4 font-family: monospace; 5} 6 7.wrapper > div { 8 text-align: center; 9} 10 11.wrapper > div + div { 12 border-inline-start: 1px solid #d6cfcf; 13 padding-inline-start: 15px; 14} 15 16.wrapper > div > p { 17 margin-top: 15px; 18 max-width: 200px; 19} 20 21.wrapper a { 22 display: inline-flex; 23 width: 50px; 24 height: 50px; 25 border-radius: 100%; 26 justify-content: center; 27 align-items: center; 28 background-color: #191919; 29 color: #d5ad72; 30 position: relative; 31} 32 33.data-tooltip::before, 34.data-tooltip::after { 35 position: absolute; 36 visibility: hidden; 37 opacity: 0; 38 transform: translateY(5px); 39 transition: all 0.2s ease; 40} 41 42.data-tooltip::before { 43 content: attr(data-tooltip-content); 44 width: fit-content; 45 font-size: small; 46 font-weight: 600; 47 background-color: inherit; 48 padding: 3px 10px; 49 border-radius: 4px; 50 bottom: calc(100% + 5px); 51} 52 53.data-tooltip::after { 54 content: ""; 55 border-top: 5px solid #191919; 56 border-left: 5px solid transparent; 57 border-right: 5px solid transparent; 58 bottom: calc(100% + 1px); 59} 60 61.data-tooltip:hover::before, 62.data-tooltip:hover::after { 63 visibility: visible; 64 opacity: 1; 65 transform: translateY(0); 66} 67 68.span-tooltip > i { 69 width: 100%; 70 height: 100%; 71 display: flex; 72 justify-content: center; 73 align-items: center; 74} 75 76.span-tooltip > span { 77 position: absolute; 78 width: fit-content; 79 font-size: small; 80 font-weight: 600; 81 background-color: inherit; 82 padding: 3px 10px; 83 border-radius: 4px; 84 bottom: 100%; 85 visibility: hidden; 86 opacity: 0; 87 transition: all 0.2s ease; 88} 89 90.span-tooltip > span::before { 91 position: absolute; 92 content: ""; 93 width: 10px; 94 height: 10px; 95 border-radius: 3px; 96 background-color: inherit; 97 transform: rotate(45deg); 98 top: calc(100% - 6px); 99 left: 40%; 100} 101 102.span-tooltip > i:hover + span { 103 visibility: visible; 104 opacity: 1; 105 bottom: calc(100% + 6px); 106} 107
718 views
718 views
MIT License