span.tooltip{padding-bottom:3px;border-bottom:1px dotted}[tooltip]:hover::after,[tooltip]:hover::before{opacity:1}[tooltip]{position:relative;cursor:pointer}[tooltip]::before{content:"";position:absolute;top:-6px;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);border-width:4px 6px 0 6px;border-style:solid;border-color:rgba(155,156,255,1) transparent transparent transparent;z-index:100;opacity:0;-webkit-transition:opacity .3s ease;-o-transition:opacity .3s ease;transition:opacity .3s ease}[tooltip]::after{content:attr(tooltip);position:absolute;left:50%;top:-6px;-webkit-transform:translateX(-50%) translateY(-100%);-ms-transform:translateX(-50%) translateY(-100%);transform:translateX(-50%) translateY(-100%);background:rgba(155,156,255,1);text-align:center;color:#fff;padding:6px;font-size:12px;min-width:150px;border-radius:5px;pointer-events:none;opacity:0;-webkit-transition:opacity .2s ease;-o-transition:opacity .2s ease;transition:opacity .2s ease}[tooltip-position=left]::before{left:0;top:50%;margin-left:-12px;-webkit-transform:translatey(-50%) rotate(-90deg);-ms-transform:translatey(-50%) rotate(-90deg);transform:translatey(-50%) rotate(-90deg)}[tooltip-position=top]::before{left:20%}[tooltip-position=bottom]::before{top:100%;margin-top:8px;-webkit-transform:translateX(-50%) translatey(-100%) rotate(-180deg);-ms-transform:translateX(-50%) translatey(-100%) rotate(-180deg);transform:translateX(-50%) translatey(-100%) rotate(-180deg)}[tooltip-position=right]::before{left:100%;top:50%;margin-left:1px;-webkit-transform:translatey(-50%) rotate(90deg);-ms-transform:translatey(-50%) rotate(90deg);transform:translatey(-50%) rotate(90deg)}[tooltip-position=left]::after{left:0;top:50%;margin-left:-8px;-webkit-transform:translateX(-100%) translateY(-50%);-ms-transform:translateX(-100%) translateY(-50%);transform:translateX(-100%) translateY(-50%)}[tooltip-position=top]::after{left:75%}[tooltip-position=bottom]::after{top:100%;margin-top:8px;-webkit-transform:translateX(-50%) translateY(0);-ms-transform:translateX(-50%) translateY(0);transform:translateX(-50%) translateY(0)}[tooltip-position=right]::after{left:100%;top:0;margin-left:8px;-webkit-transform:translateX(0) translateY(-50%);-ms-transform:translateX(0) translateY(-50%);transform:translateX(0) translateY(-50%)}