This post is saved as a draft.
#ffffff
1/* Material Design 3 tooltip */ 2.tooltip-container { 3 position: relative; 4 background: #e8def8; 5 color: #1d192b; 6 cursor: pointer; 7 transition: all 0.2s; 8 font-size: 17px; 9 padding: 0.7em 1.8em; 10 font-family: Montserrat, sans-serif; 11 border-radius: 50px; 12} 13.tooltip-container .text { 14 font-weight: bold; 15} 16 17.tooltip { 18 transform-origin: center left; 19 scale: 0; 20 position: absolute; 21 top: 130%; 22 left: 50%; 23 transform: translate(-50%, -10px); 24 transition: all 0.25s; 25 background: #f3edf7; 26 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15); 27 padding: 17px; 28 border-radius: 12px; 29 color: #49454f; 30 min-width: 312px; 31} 32 33.tooltip-container:hover .tooltip { 34 scale: 1; 35} 36 37.tooltip .title { 38 font-weight: bold; 39 font-size: 1em; 40} 41 42.tooltip .content { 43 font-size: 0.85em; 44 font-weight: semibold; 45} 46
Variation of atooltip
Variation of atooltip