.ptt {position: relative;cursor: default;}.ptt::before, .ptt::after {position: absolute;left: 50%;opacity: 0;transition: all ease 0.8s;}.ptt::before {border-width: 10px 8px 0 8px;border-style: solid;border-color: rgb(162, 212, 123) transparent transparent transparent;transform: translateX(-50%);top: -20px}.ptt::after {background: rgb(162, 212, 123);top: -20px;font-size: 13px;text-align: center;min-width: 300px;max-width: 300px;padding: 14px;border-radius: 10px;color: white;transform: translate(-50%, -100%);word-wrap: break-word;word-break: break-word;overflow-wrap: break-word;white-space: normal !important;display: block;overflow: hidden;}.ptt {position: relative;}.ptt::before,.ptt::after {position: absolute;left: 50%;transform: translate(-50%, -100%);opacity: 0;transition: opacity 0.2s ease-in-out;pointer-events: none;}.ptt::before {content: '';}.ptt::after {content: '';color: white;background: rgb(162, 212, 123);padding: 10px;border-radius: 5px;white-space: pre;max-width: 300px;text-align: center;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);}.ptt:hover::before,.ptt:hover::after {opacity: 1;}.ptt:hover::after {content: attr(ptt-text);}