@lunalytics/ui/dist/assets/tooltip.css

React based component library created to be used in Lunalytics

body{font-size:var(--lunaui-size-md);font-weight:var(--lunaui-weight-medium);line-height:1.5;color:var(--lunaui-text-color);isolation:isolate}.luna-tooltip-container{position:relative;display:inline-block}.luna-tooltip-container:hover{cursor:pointer}.luna-tooltip{background-color:var(--lunaui-accent-600);color:var(--lunaui-text-color);padding:.5rem;font-size:var(--lunaui-size-md);font-weight:var(--lunaui-weight-medium);border-radius:var(--lunaui-radius-sm);white-space:nowrap;z-index:10;max-width:12.5rem;--tooltip-background: var(--lunaui-primary-700);--tooltip-color: var(--lunaui-text-color);color:var(--tooltip-color);background-color:var(--tooltip-background)}.luna-tooltip .luna-tooltip--primary{--tooltip-background: var(--lunaui-primary-700);--tooltip-color: var(--lunaui-text-color)}.luna-tooltip.blue{--tooltip-background: var(--lunaui-blue-700);--tooltip-color: var(--lunaui-text-color)}.luna-tooltip.cyan{--tooltip-background: var(--lunaui-cyan-700);--tooltip-color: var(--lunaui-text-color)}.luna-tooltip.green{--tooltip-background: var(--lunaui-green-700);--tooltip-color: var(--lunaui-text-color)}.luna-tooltip.pink{--tooltip-background: var(--lunaui-pink-700);--tooltip-color: var(--lunaui-text-color)}.luna-tooltip.purple{--tooltip-background: var(--lunaui-purple-700);--tooltip-color: var(--lunaui-text-color)}.luna-tooltip.red{--tooltip-background: var(--lunaui-red-700);--tooltip-color: var(--lunaui-text-color)}.luna-tooltip.yellow{--tooltip-background: var(--lunaui-yellow-700);--tooltip-color: var(--lunaui-text-color)}.luna-tooltip.gray{--tooltip-background: var(--lunaui-gray-700);--tooltip-color: var(--lunaui-text-color)}.luna-tooltip--arrow{display:flex}.luna-tooltip--arrow[data-side=top]{bottom:-8px;rotate:180deg}.luna-tooltip--arrow[data-side=bottom]{top:-8px;rotate:0deg}.luna-tooltip--arrow[data-side=left]{right:-13px;rotate:90deg}.luna-tooltip--arrow[data-side=right]{left:-13px;rotate:-90deg}.luna-tooltip--arrow-fill{fill:var(--tooltip-background)}@media (prefers-color-scheme: light){.luna-tooltip--arrow-outer-stroke{fill:var(--tooltip-background)}}@media (prefers-color-scheme: dark){.luna-tooltip--arrow-inner-stroke{fill:var(--tooltip-background)}}