MediaWiki:Gadget-Tooltips.css

.tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; }

.tooltip .tooltiptext { width: 120px; background-color: black; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; opacity: 0; transition: opacity 0.3s; position: absolute; z-index: 1; }

.tooltip:hover .tooltiptext { opacity: 1; }

.tooltip .tooltiptext.left, .tooltip .tooltiptext.right { top: -5px; }

.tooltip .tooltiptext.left { right: calc(100% + 6px); }

.tooltip .tooltiptext.right { left: calc(100% + 6px); }

.tooltip .tooltiptext.top, .tooltip .tooltiptext.bottom { left: 50%; }

.tooltip .tooltiptext.top { bottom: 100%; margin-left: -60px; }

.tooltip .tooltiptext.bottom { top: 100%; margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */ }

.tooltip .tooltiptext::after { content: " "; position: absolute; border-width: 5px; border-style: solid; }

.tooltip .tooltiptext.left::after { top: 50%; left: 100%; margin-top: -5px; border-color: transparent transparent transparent black; }

.tooltip .tooltiptext.right::after { top: 50%; right: 100%; margin-top: -5px; border-color: transparent black transparent transparent; }

.tooltip .tooltiptext.top::after { top: 100%; left: 50%; margin-left: -5px; border-color: black transparent transparent transparent; }

.tooltip .tooltiptext.bottom::after { bottom: 100%; left: 50%; margin-left: -5px; border-color: transparent transparent black transparent; }