.tooltip { background-color: white; border: solid 1px #999; border-radius: 3px; padding: 10px; position: absolute; -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2); box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2); z-index: 10; top: 26px; left: 50px; width: 200px; text-align: left; color: #616161; } .tooltip::before{ content: ''; border: 10px solid transparent; border-top-color: #999; position: absolute; left: 46px; top: -21px; transform: rotate(180deg); } .tooltip::after{ content: ''; border: 10px solid transparent; border-top-color: white; position: absolute; left: 46px; top: -20px; transform: rotate(180deg); } .headline { color: #484747; display: inline-block; margin: 0; padding: 0; font-size: 1.02em; margin-left: 6px; letter-spacing: 0.2px; vertical-align: middle; margin-bottom: 2px; line-height: 22px; } .icon { font-size: 1.4em; vertical-align: middle; } .description { width: 100%; box-sizing: border-box; white-space: pre-wrap; padding: 0; margin: 0; padding-left: 25px; font-weight: 400; font-size: 1em; }