@vuesax-alpha/nightly/theme-chalk/vs-tooltip.css

A Component Library for Vue 3

.vs-tooltip{--vs-color:var(--vs-text);background:rgba(var(--vs-color),1);color:rgba(var(--vs-background),1);text-align:center;padding:5px 10px;border-radius:12px;font-size:.85rem;max-width:350px;min-width:30px;min-height:30px}.vs-tooltip::after{background-color:rgba(var(--vs-color),1)}.vs-tooltip.is-loading{color:rgba(var(--vs-background),.2)}.vs-tooltip.is-loading *{opacity:.5;pointer-events:none}.vs-tooltip.is-border-thick{background:rgba(var(--vs-background),1);color:rgba(var(--vs-color),1);box-shadow:0 2px 10px 0 rgba(0,0,0,var(--vs-shadow-opacity))}.vs-tooltip.is-border-thick[data-popper-placement*=top]{border-bottom:4px solid rgba(var(--vs-color),1)}.vs-tooltip.is-border-thick[data-popper-placement*=top]:after{bottom:-7px}.vs-tooltip.is-border-thick[data-popper-placement*=left]{border-right:4px solid rgba(var(--vs-color),1)}.vs-tooltip.is-border-thick[data-popper-placement*=left]:after{right:-7px}.vs-tooltip.is-border-thick[data-popper-placement*=right]{border-left:4px solid rgba(var(--vs-color),1)}.vs-tooltip.is-border-thick[data-popper-placement*=right]:after{left:-7px}.vs-tooltip.is-border-thick[data-popper-placement*=bottom]{border-top:4px solid rgba(var(--vs-color),1)}.vs-tooltip.is-border-thick[data-popper-placement*=bottom]:after{top:-7px}.vs-tooltip.is-border-thick:before{width:100%;height:100%;z-index:-1;background:inherit;border-radius:inherit;top:0;left:0;content:"";position:absolute}.vs-tooltip.is-border-thick:after{background:rgba(var(--vs-color),1)!important}.vs-tooltip.is-border{background:rgba(var(--vs-background),1);color:rgba(var(--vs-color),1);border:2px solid rgba(var(--vs-color),1)}.vs-tooltip.is-border:before{width:100%;height:100%;z-index:-1;background:inherit;border-radius:inherit;top:0;left:0;content:"";position:absolute}.vs-tooltip.is-border:after{border:2px solid rgba(var(--vs-color),1);width:12px!important;height:12px!important}.vs-tooltip.is-circle{border-radius:20px}.vs-tooltip.is-square{border-radius:0}.vs-tooltip.is-not-arrow:after{display:none}.vs-tooltip.is-shadow{background:rgba(var(--vs-background),1);color:rgba(var(--vs-color),1);box-shadow:0 2px 10px 0 rgba(0,0,0,var(--vs-shadow-opacity))}.vs-tooltip.is-shadow:before{width:100%;height:100%;z-index:-1;background:inherit;border-radius:inherit;top:0;left:0;content:"";position:absolute}.vs-tooltip.is-shadow:after{background:rgba(var(--vs-background),1);box-shadow:0 2px 10px 0 rgba(0,0,0,var(--vs-shadow-opacity))}.vs-tooltip.is-light{--vs-color:var(--vs-gray-3);color:#fff}