/* Tooltip container */ .tooltip { position: relative; display: inline-block; border-bottom: 1px; } /* Tooltip text */ .tooltip .tooltiptext { visibility: hidden; width: 120px; text-align: center; padding: 3px; border-radius: 6px; border: 1px #a2a9b1 solid; /* Position the tooltip text - see examples below! */ bottom: 100%; left: 50%; margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */ position: absolute; z-index: 1; } /* Tooltip Arrow */ .tooltip .tooltiptext::after { content: " "; position: absolute; top: 100%; /* At the bottom of the tooltip */ left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #a2a9b1 transparent transparent transparent; } /* Show the tooltip text when you mouse over the tooltip container */ .tooltip:hover .tooltiptext { visibility: visible; }