yu.css.ui/dist/component/tooltip.css

纯CSS通用UI模块和组件

.yu-tooltip{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;position:relative;display:inline-block}.yu-tooltip.light>[data-tooltip]:before{background-color:#fff;color:#606266;border:1px solid #e4e7ed}.yu-tooltip.light>[data-tooltip]:after{background-color:#fff;border-right:1px solid #e4e7ed;border-bottom:1px solid #e4e7ed}.yu-tooltip>[data-tooltip]:before{content:attr(data-tooltip);padding:0 14px;height:32px;line-height:32px;color:#fff;border-radius:4px;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);white-space:nowrap}.yu-tooltip>[data-tooltip]:after,.yu-tooltip>[data-tooltip]:before{position:absolute;display:block;background-color:#373737;visibility:hidden;z-index:1}.yu-tooltip>[data-tooltip]:after{content:"";height:8px;width:8px;transform:rotate(45deg)}.yu-tooltip.active>[data-tooltip]:after,.yu-tooltip.active>[data-tooltip]:before,.yu-tooltip:hover:not(.active-control)>[data-tooltip]:after,.yu-tooltip:hover:not(.active-control)>[data-tooltip]:before{visibility:visible}.yu-tooltip.top-left>[data-tooltip]:before{top:-46px;left:0}.yu-tooltip.top-left>[data-tooltip]:after{top:-18px;left:14px}.yu-tooltip.top-center>[data-tooltip]:before{top:-46px;left:50%;transform:translate(-50%)}.yu-tooltip.top-center>[data-tooltip]:after{top:-18px;left:50%;transform:translate(-4px) rotate(45deg)}.yu-tooltip.top-right>[data-tooltip]:before{top:-46px;right:0}.yu-tooltip.top-right>[data-tooltip]:after{top:-18px;right:22px}.yu-tooltip.right-top>[data-tooltip]:before{top:0;left:100%;transform:translate(14px)}.yu-tooltip.right-top>[data-tooltip]:after{top:6px;left:100%;transform:translate(10px) rotate(45deg)}.yu-tooltip.right-center>[data-tooltip]:before{top:50%;left:100%;transform:translate(14px,-50%)}.yu-tooltip.right-center>[data-tooltip]:after{top:50%;left:100%;transform:translate(10px,-4px) rotate(45deg)}.yu-tooltip.right-bottom>[data-tooltip]:before{top:100%;left:100%;transform:translate(14px,-32px)}.yu-tooltip.right-bottom>[data-tooltip]:after{top:100%;left:100%;transform:translate(10px,-14px) rotate(45deg)}.yu-tooltip.bottom-left>[data-tooltip]:before{bottom:-46px;left:0}.yu-tooltip.bottom-left>[data-tooltip]:after{bottom:-18px;left:14px}.yu-tooltip.bottom-center>[data-tooltip]:before{bottom:-46px;left:50%;transform:translate(-50%)}.yu-tooltip.bottom-center>[data-tooltip]:after{bottom:-18px;left:50%;transform:translate(-4px) rotate(45deg)}.yu-tooltip.bottom-right>[data-tooltip]:before{bottom:-46px;right:0}.yu-tooltip.bottom-right>[data-tooltip]:after{bottom:-18px;right:22px}.yu-tooltip.left-top>[data-tooltip]:before{top:0;right:100%;transform:translate(-14px)}.yu-tooltip.left-top>[data-tooltip]:after{top:6px;right:100%;transform:translate(-10px) rotate(45deg)}.yu-tooltip.left-center>[data-tooltip]:before{top:50%;right:100%;transform:translate(-14px,-50%)}.yu-tooltip.left-center>[data-tooltip]:after{top:50%;right:100%;transform:translate(-10px,-4px) rotate(45deg)}.yu-tooltip.left-bottom>[data-tooltip]:before{top:100%;right:100%;transform:translate(-14px,-32px)}.yu-tooltip.left-bottom>[data-tooltip]:after{top:100%;right:100%;transform:translate(-10px,-14px) rotate(45deg)}