Template:Tooltip/styles.css

.con-tooltip { position: relative; display: inline-block; cursor: help; border-bottom: 1px dotted gray; }

/*tooltip */ .tooltip { visibility: hidden; z-index: 1; opacity: .40; width: 200px; padding: 1em; background: ivory; color: black; position: absolute; top: -100%; left: -10%; border-radius: 9px; font-size: 0.9em; transform: translateY(9px); transition: all 0.3s ease-in-out; }

/* tooltip after*/ .tooltip::after { content: " "; width: 0; height: 0; position: absolute; left: 50%; }

.con-tooltip:hover .tooltip { visibility: visible; opacity: 1; transition: .3s linear; animation: 1s ease-in-out; }

.left .tooltip { top: -20%; left: -170%; }

.left .tooltip::after { top: 40%; left: 90%; transform: rotate(-90deg); }

/*bottom*/ .bottom .tooltip { top: 115%; left: -20%; }

.bottom .tooltip::after { top:-17%; left: 40%; transform: rotate(180deg); }

/*right*/ .right .tooltip { top: -20%; left: 115%; }

.right .tooltip::after { top: 40%; left: -12%; transform: rotate(90deg); }