@varlet/ui/es/tooltip/tooltip.css

A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.

:root { --tooltip-opacity: 0.9; --tooltip-border-radius: 4px; --tooltip-font-size: 14px; --tooltip-padding: 8px 16px; --tooltip-offset: 10px; --tooltip-default-color: #616161; --tooltip-primary-color: var(--color-primary); --tooltip-info-color: var(--color-info); --tooltip-success-color: var(--color-success); --tooltip-warning-color: var(--color-warning); --tooltip-danger-color: var(--color-danger); --tooltip-default-text-color: #fff; --tooltip-primary-text-color: var(--color-on-primary); --tooltip-info-text-color: var(--color-on-info); --tooltip-success-text-color: var(--color-on-success); --tooltip-warning-text-color: var(--color-on-warning); --tooltip-danger-text-color: var(--color-on-danger);}.var-tooltip { display: inline-block;}.var-tooltip-enter-from,.var-tooltip-leave-to { opacity: 0; transform: scale(0.8);}.var-tooltip-enter-active,.var-tooltip-leave-active { transition-property: opacity, transform; transition-duration: 0.2s;}.var-tooltip__content-container { display: inline-block; text-align: center; border-radius: var(--tooltip-border-radius); font-size: var(--tooltip-font-size); padding: var(--tooltip-padding); opacity: var(--tooltip-opacity); transition: opacity 0.25s, background-color 0.25s;}.var-tooltip--default { color: var(--tooltip-default-text-color); background: var(--tooltip-default-color);}.var-tooltip--primary { color: var(--tooltip-primary-text-color); background-color: var(--tooltip-primary-color);}.var-tooltip--info { color: var(--tooltip-info-text-color); background-color: var(--tooltip-info-color);}.var-tooltip--success { color: var(--tooltip-success-text-color); background-color: var(--tooltip-success-color);}.var-tooltip--warning { color: var(--tooltip-warning-text-color); background-color: var(--tooltip-warning-color);}.var-tooltip--danger { color: var(--tooltip-danger-text-color); background-color: var(--tooltip-danger-color);}.var-tooltip__tooltip[data-popper-placement='top'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='top-start'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='top-end'] .var-tooltip__content-container { transform: translateY(calc(-1 * var(--tooltip-offset)));}.var-tooltip__tooltip[data-popper-placement='bottom'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='bottom-start'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='bottom-end'] .var-tooltip__content-container { transform: translateY(var(--tooltip-offset));}.var-tooltip__tooltip[data-popper-placement='right'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='right-start'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='right-end'] .var-tooltip__content-container { transform: translateX(var(--tooltip-offset));}.var-tooltip__tooltip[data-popper-placement='left'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='left-start'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='left-end'] .var-tooltip__content-container { transform: translateX(calc(-1 * var(--tooltip-offset)));}