[data-tooltip]{position:relative;pointer:cursor}[data-tooltip]:before,[data-tooltip]:after{text-transform:none;font-size:.9em;line-height:1;position:absolute;display:none;opacity:0}[data-tooltip]:before{content:'';border:6px solid transparent;z-index:101}[data-tooltip]:after{content:attr(data-tooltip);text-align:center;min-width:3em;max-width:21em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:6px 8px;border-radius:3px;background:#333;color:#fff;z-index:100}[data-tooltip]:hover:before,[data-tooltip]:hover:after{display:block}[data-tooltip='']:before,[data-tooltip='']:after{display:none !important}[data-tooltip]:not([data-flow]):before,[data-tooltip][data-flow^=top]:before{bottom:100%;border-bottom-width:0;border-top-color:#333}[data-tooltip]:not([data-flow]):after,[data-tooltip][data-flow^=top]:after{bottom:calc(100% + 5px)}[data-tooltip]:not([data-flow]):before,[data-tooltip]:not([data-flow]):after,[data-tooltip][data-flow^=top]:before,[data-tooltip][data-flow^=top]:after{left:50%;transform:translate(-50%,-.4em)}[data-tooltip][data-flow^=bottom]:before{top:100%;border-top-width:0;border-bottom-color:#333}[data-tooltip][data-flow^=bottom]:after{top:calc(100% + 5px)}[data-tooltip][data-flow^=bottom]:before,[data-tooltip][data-flow^=bottom]:after{left:50%;transform:translate(-50%,.4em)}[data-tooltip][data-flow^=left]:before{top:50%;border-right-width:0;border-left-color:#333;left:calc(0em - 5px);transform:translate(-.5em,-50%)}[data-tooltip][data-flow^=left]:after{top:50%;right:calc(100% + 5px);transform:translate(-.4em,-50%)}[data-tooltip][data-flow^=right]:before{top:50%;border-left-width:0;border-right-color:#333;right:calc(0em - 7px);transform:translate(.4em,-50%)}[data-tooltip][data-flow^=right]:after{top:50%;left:calc(100% + 5px);transform:translate(.5em,-50%)}@keyframes tooltip-vert{to{opacity:1;transform:translate(-50%,0)}}@keyframes tooltip-horz{to{opacity:1;transform:translate(0,-50%)}}[data-tooltip]:not([data-flow]):hover:before,[data-tooltip]:not([data-flow]):hover:after,[data-tooltip][data-flow^=top]:hover:before,[data-tooltip][data-flow^=top]:hover:after,[data-tooltip][data-flow^=bottom]:hover:before,[data-tooltip][data-flow^=bottom]:hover:after{animation:tooltip-vert .5s ease-out forwards}[data-tooltip][data-flow^=left]:hover:before,[data-tooltip][data-flow^=left]:hover:after,[data-tooltip][data-flow^=right]:hover:before,[data-tooltip][data-flow^=right]:hover:after{animation:tooltip-horz .5s ease-out forwards}