:root{--tooltip-border-color:#272727;--tooltip-bg-color:#272727;--tooltip-text-color:#fff;--tooltip-fontfamily:arial}[data-tooltip]{cursor:default;position:relative}[data-tooltip]:hover:before{background:var(--tooltip-bg-color);border-radius:4px;bottom:calc(100% + 10px);color:var(--tooltip-text-color);content:attr(data-tooltip);font-family:var(--tooltip-fontfamily);font-size:14px;font-style:normal;max-width:200px;min-width:150px;padding:10px;text-align:center;transform:translate(-50%)}[data-tooltip]:hover:after,[data-tooltip]:hover:before{animation:fade-in .3s ease;display:block;left:50%;position:absolute;z-index:1}[data-tooltip]:hover:after{border:1px solid var(--tooltip-border-color);border-color:var(--tooltip-border-color) transparent transparent transparent;border-width:4px 6px 0;bottom:calc(100% + 6px);content:"";height:0;margin-left:-3px;width:0}[data-tooltip][tooltip-position=bottom]:hover:before{bottom:auto;top:calc(100% + 10px)}[data-tooltip][tooltip-position=bottom]:hover:after{border-color:transparent transparent #272727;border-width:0 6px 4px;bottom:auto;top:calc(100% + 6px)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}