painless-ui
Version:
2 lines (1 loc) • 1.18 kB
CSS
.tooltip{position:relative;display:inline-block;border-bottom:1px dotted black}.tooltip .tooltip-text{min-width:120px;background-color:#555;color:#fff;border-radius:6px;padding:5px;position:absolute;z-index:1;transition:opacity 0.3s;z-index:1000000000}.tooltip .tooltip-text::after{content:"";position:absolute}.tooltip .tooltip-text.bottom{top:150%;left:50%;margin-left:-50%}.tooltip .tooltip-text.bottom::after{bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:transparent transparent #555 transparent}.tooltip .tooltip-text.top{bottom:150%;left:50%;margin-left:-50%}.tooltip .tooltip-text.top:after{top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:#555 transparent transparent transparent}.tooltip .tooltip-text.left{top:-5px;right:110%}.tooltip .tooltip-text.left:after{top:50%;left:100%;margin-top:-5px;border-width:5px;border-style:solid;border-color:transparent transparent transparent #555}.tooltip .tooltip-text.right{top:-5px;left:110%}.tooltip .tooltip-text.right:after{top:50%;right:100%;margin-top:-5px;border-width:5px;border-style:solid;border-color:transparent #555 transparent transparent}