@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
1 lines • 2.08 kB
CSS
.dnb-tooltip{--tooltip-color:#fff;--tooltip-background-color:#000;--tooltip-border-color:1px solid #000;--tooltip-border-radius:1rem;align-items:center;background-color:var(--tooltip-background-color);border-radius:var(--tooltip-border-radius);box-shadow:var(--shadow-default);color:var(--tooltip-color);display:flex;flex-direction:column;justify-content:center;opacity:0;padding:0 1rem;position:absolute;text-align:center;transition:opacity .2s var(--easing-default);visibility:hidden;z-index:3100}.dnb-tooltip--large{padding:.25rem 1rem}.dnb-tooltip--active{animation:show-tooltip .2s var(--easing-default) forwards;visibility:visible}.dnb-tooltip--active.dnb-tooltip--no-animation,html[data-visual-test] .dnb-tooltip--active{animation:show-tooltip 1ms var(--easing-default) forwards}.dnb-tooltip--hide{animation:hide-tooltip .2s var(--easing-default) forwards;visibility:visible}.dnb-tooltip--hide.dnb-tooltip--no-animation{animation:hide-tooltip 1ms linear forwards}.dnb-tooltip--fixed{position:fixed}html[data-visual-test] .dnb-tooltip--hide{animation:hide-tooltip 1ms linear 1s forwards}.dnb-tooltip__portal{left:0;position:absolute;right:0;top:0}.dnb-tooltip__content{min-height:1.5rem;min-width:2rem;padding:0}.dnb-tooltip__arrow{height:.5rem;margin:0;overflow:hidden;pointer-events:none;position:absolute;width:1rem}.dnb-tooltip__arrow:before{background-color:var(--tooltip-background-color);border:var(--tooltip-border-color);bottom:0;content:"";height:1rem;left:0;position:absolute;transform:translateY(70%) rotate(45deg);width:1rem}.dnb-tooltip__arrow__position--bottom{top:-.5rem}.dnb-tooltip__arrow__position--top{bottom:-.5rem;transform:rotate(180deg)}.dnb-tooltip__arrow__position--left{margin-right:3px;right:-.75rem;transform:rotate(90deg)}.dnb-tooltip__arrow__position--right{left:-.75rem;margin-left:3px;transform:rotate(270deg)}.dnb-tooltip__arrow__arrow--left{align-self:flex-start}.dnb-tooltip__arrow__arrow--right{align-self:flex-end}@keyframes show-tooltip{0%{opacity:0}to{opacity:1}}@keyframes hide-tooltip{0%{opacity:1}to{opacity:0;visibility:hidden}}