ts-tooltip/dist/index.css

tooltip package

:root{--ts-font-size-base: 14px;--ts-color-text: #000000E0;--ts-popover-bg-color: #fff;--ts-popover-border-color: #dcdfe6;--ts-transition-duration: .3s}html.dark{--ts-color-text: #ffffffE0;--ts-popover-bg-color: #333;--ts-popover-border-color: #666}.ts-tooltip{display:inline-block}.ts-tooltip--popper{background:var(--ts-popover-bg-color);border-radius:4px;border:1px solid var(--ts-popover-border-color);padding:10px;color:var(--ts-color-text);line-height:1.2;text-align:justify;font-size:var(--ts-font-size-base);box-shadow:0 0 10px #0000001f;word-break:break-all;box-sizing:border-box;position:relative;z-index:1000}.ts-tooltip--popper #popper-arrow,.ts-tooltip--popper #popper-arrow:before{position:absolute;width:8px;height:8px;background:var(--ts-popover-bg-color);box-sizing:border-box}.ts-tooltip--popper #popper-arrow{visibility:hidden}.ts-tooltip--popper #popper-arrow:before{content:"";visibility:visible;transform:rotate(45deg)}.ts-tooltip--popper[data-popper-placement^=top]>#popper-arrow{bottom:-5px}.ts-tooltip--popper[data-popper-placement^=right]>#popper-arrow{left:-5px}.ts-tooltip--popper[data-popper-placement^=bottom]>#popper-arrow{top:-5px}.ts-tooltip--popper[data-popper-placement^=left]>#popper-arrow{right:-5px}.ts-tooltip--popper[data-popper-placement^=top]>#popper-arrow:before{border-right:1px solid var(--ts-popover-border-color);border-bottom:1px solid var(--ts-popover-border-color)}.ts-tooltip--popper[data-popper-placement^=right]>#popper-arrow:before{border-left:1px solid var(--ts-popover-border-color);border-bottom:1px solid var(--ts-popover-border-color)}.ts-tooltip--popper[data-popper-placement^=bottom]>#popper-arrow:before{border-left:1px solid var(--ts-popover-border-color);border-top:1px solid var(--ts-popover-border-color)}.ts-tooltip--popper[data-popper-placement^=left]>#popper-arrow:before{border-right:1px solid var(--ts-popover-border-color);border-top:1px solid var(--ts-popover-border-color)}.ts-tooltip .fade-enter-active,.ts-tooltip .fade-leave-active{transition:opacity var(--ts-transition-duration)}.ts-tooltip .fade-enter-from,.ts-tooltip .fade-leave-to{opacity:0}