song-ui-u/theme/tooltip.css

vue3 + js的PC前端组件库

@charset "UTF-8";.x-tooltip{position:relative;display:inline-block}.x-tooltip__content{position:absolute;background:#303133;color:#fff;padding:8px 12px;border-radius:4px;font-size:12px;white-space:nowrap;z-index:1000;box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.x-tooltip__content::before{content:"";position:absolute;width:0;height:0;border:6px solid transparent}.x-tooltip--content_top{bottom:calc(100% + 12px);left:50%;transform:translateX(-50%)}.x-tooltip--content_top::before{bottom:-12px;left:50%;transform:translateX(-50%);border-top-color:#303133}.x-tooltip--content_bottom{top:calc(100% + 12px);left:50%;transform:translateX(-50%)}.x-tooltip--content_bottom::before{top:-12px;left:50%;transform:translateX(-50%);border-bottom-color:#303133}.x-tooltip--content_left{right:calc(100% + 12px);top:50%;transform:translateY(-50%)}.x-tooltip--content_left::before{right:-12px;top:50%;transform:translateY(-50%);border-left-color:#303133}.x-tooltip--content_right{left:calc(100% + 12px);top:50%;transform:translateY(-50%)}.x-tooltip--content_right::before{left:-12px;top:50%;transform:translateY(-50%);border-right-color:#303133}.x-tooltip-enter-active,.x-tooltip-leave-active{transition:opacity .2s,transform .2s}.x-tooltip-enter-from,.x-tooltip-leave-to{opacity:0;transform:scale(.8)}