.p-tooltip { position: relative; } .p-tooltip:hover .p-tooltip-arrow, .p-tooltip:hover .p-tooltip-content { opacity: 1; } .p-tooltip-arrow { border: 8px solid transparent; border-top-color: #00439e; bottom: 100%; height: 0; left: 50%; opacity: 0; position: absolute; transform: translate(-50%, 8px); width: 0; z-index: 10; } .p-tooltip-content { background-color: #00439e; border-radius: 2px; bottom: 100%; left: 50%; opacity: 0; position: absolute; transform: translate(-50%, -8px); z-index: 10; }