daisyui/components/tooltip.css

daisyUI 5 - The Tailwind CSS Component Library

/*! 🌼 daisyUI 5.6.3 - MIT License */ @layer utilities{.tooltip{@layer daisyui.l1.l2.l3{--tt-bg:var(--color-neutral);--tt-off:calc(100% + .5rem);--tt-tail:calc(100% + 1px + .25rem);--tt-tail-off:.5rem;display:inline-block;position:relative;&>.tooltip-content,&[data-tip]:before{border-radius:var(--radius-field);text-align:center;white-space:normal;max-width:20rem;color:var(--color-neutral-content);opacity:0;background-color:var(--tt-bg);pointer-events:none;z-index:2;--tw-content:attr(data-tip);content:var(--tw-content);width:max-content;padding-block:.25rem;padding-inline:.5rem;font-size:.875rem;line-height:1.25;position:absolute}&:after{opacity:0;background-color:var(--tt-bg);content:"";pointer-events:none;--mask-tooltip:url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A");width:.625rem;height:.25rem;mask-position:-1px 0;mask-repeat:no-repeat;mask-image:var(--mask-tooltip);display:block;position:absolute}@media (prefers-reduced-motion:no-preference){&>.tooltip-content,&[data-tip]:before,&:after{transition:opacity .2s cubic-bezier(.4,0,.2,1) 75ms,transform .2s cubic-bezier(.4,0,.2,1) 75ms}}&:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))){&.tooltip-open,&:hover,&:has(:focus-visible){&>.tooltip-content,&[data-tip]:before,&:after{opacity:1;--tt-pos:0rem;@media (prefers-reduced-motion:no-preference){transition:opacity .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1)}}}}}}.tooltip,.tooltip-top{@layer daisyui.l1.l2{&>.tooltip-content,&[data-tip]:before{transform:translateX(var(--tt-trans,-50%)) translateY(var(--tt-pos,.25rem));inset-inline:var(--tt-inset,50% auto);inset-block:auto var(--tt-off)}&:after{transform:translateX(var(--tt-trans,-50%)) translateY(var(--tt-pos,.25rem));inset-inline:var(--tt-tail-inset,50% auto);inset-block:auto var(--tt-tail)}}}.tooltip-bottom{@layer daisyui.l1.l2{&>.tooltip-content,&[data-tip]:before{transform:translateX(var(--tt-trans,-50%)) translateY(var(--tt-pos,-.25rem));inset-inline:var(--tt-inset,50% auto);inset-block:var(--tt-off) auto}&:after{transform:translateX(var(--tt-trans,-50%)) translateY(var(--tt-pos,-.25rem)) rotate(180deg);inset-inline:var(--tt-tail-inset,50% auto);inset-block:var(--tt-tail) auto}}}.tooltip-left{@layer daisyui.l1.l2{&>.tooltip-content,&[data-tip]:before{transform:translateX(calc(var(--tt-pos,.25rem) - .25rem)) translateY(var(--tt-trans,-50%));inset-inline:auto var(--tt-off);inset-block:var(--tt-inset,50% auto)}&:after{transform:translateX(var(--tt-pos,.25rem)) translateY(var(--tt-trans,-50%)) rotate(-90deg);inset-inline:auto calc(var(--tt-tail) + 1px);inset-block:var(--tt-tail-inset,50% auto)}}}.tooltip-right{@layer daisyui.l1.l2{&>.tooltip-content,&[data-tip]:before{transform:translateX(calc(var(--tt-pos,-.25rem) + .25rem)) translateY(var(--tt-trans,-50%));inset-inline:var(--tt-off) auto;inset-block:var(--tt-inset,50% auto)}&:after{transform:translateX(var(--tt-pos,-.25rem)) translateY(var(--tt-trans,-50%)) rotate(90deg);inset-inline:calc(var(--tt-tail) + 1px) auto;inset-block:var(--tt-tail-inset,50% auto)}}}.tooltip-start{@layer daisyui.l1.l2{--tt-trans:0;--tt-inset:0 auto;--tt-tail-inset:var(--tt-tail-off) auto}}.tooltip-center{@layer daisyui.l1.l2{--tt-trans:-50%;--tt-inset:50% auto;--tt-tail-inset:50% auto}}.tooltip-end{@layer daisyui.l1.l2{--tt-trans:0;--tt-inset:auto 0;--tt-tail-inset:auto var(--tt-tail-off)}}.tooltip-primary{@layer daisyui.l1.l2{--tt-bg:var(--color-primary);&>.tooltip-content,&[data-tip]:before{color:var(--color-primary-content)}}}.tooltip-secondary{@layer daisyui.l1.l2{--tt-bg:var(--color-secondary);&>.tooltip-content,&[data-tip]:before{color:var(--color-secondary-content)}}}.tooltip-accent{@layer daisyui.l1.l2{--tt-bg:var(--color-accent);&>.tooltip-content,&[data-tip]:before{color:var(--color-accent-content)}}}.tooltip-info{@layer daisyui.l1.l2{--tt-bg:var(--color-info);&>.tooltip-content,&[data-tip]:before{color:var(--color-info-content)}}}.tooltip-success{@layer daisyui.l1.l2{--tt-bg:var(--color-success);&>.tooltip-content,&[data-tip]:before{color:var(--color-success-content)}}}.tooltip-warning{@layer daisyui.l1.l2{--tt-bg:var(--color-warning);&>.tooltip-content,&[data-tip]:before{color:var(--color-warning-content)}}}.tooltip-error{@layer daisyui.l1.l2{--tt-bg:var(--color-error);&>.tooltip-content,&[data-tip]:before{color:var(--color-error-content)}}}@media (width>=640px){.sm\:tooltip{@layer daisyui.l1.l2.l3{--tt-bg:var(--color-neutral);--tt-off:calc(100% + .5rem);--tt-tail:calc(100% + 1px + .25rem);--tt-tail-off:.5rem;display:inline-block;position:relative;&>.tooltip-content,&[data-tip]:before{border-radius:var(--radius-field);text-align:center;white-space:normal;max-width:20rem;color:var(--color-neutral-content);opacity:0;background-color:var(--tt-bg);pointer-events:none;z-index:2;--tw-content:attr(data-tip);content:var(--tw-content);width:max-content;padding-block:.25rem;padding-inline:.5rem;font-size:.875rem;line-height:1.25;position:absolute}&:after{opacity:0;background-color:var(--tt-bg);content:"";pointer-events:none;--mask-tooltip:url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A");width:.625rem;height:.25rem;mask-position:-1px 0;mask-repeat:no-repeat;mask-image:var(--mask-tooltip);display:block;position:absolute}@media (prefers-reduced-motion:no-preference){&>.tooltip-content,&[data-tip]:before,&:after{transition:opacity .2s cubic-bezier(.4,0,.2,1) 75ms,transform .2s cubic-bezier(.4,0,.2,1) 75ms}}&:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))){&.tooltip-open,&:hover,&:has(:focus-visible){&>.tooltip-content,&[data-tip]:before,&:after{opacity:1;--tt-pos:0rem;@media (prefers-reduced-motion:no-preference){transition:opacity .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1)}}}}}}.sm\:tooltip,.sm\:tooltip-top{@layer daisyui.l1.l2{&>.tooltip-content,&[data-tip]:before{transform:translateX(var(--tt-trans,-50%)) translateY(var(--tt-pos,.25rem));inset-inline:var(--tt-inset,50% auto);inset-block:auto var(--tt-off)}&:after{transform:translateX(var(--tt-trans,-50%)) translateY(var(--tt-pos,.25rem));inset-inline:var(--tt-tail-inset,50% auto);inset-block:auto var(--tt-tail)}}}.sm\:tooltip-bottom{@layer daisyui.l1.l2{&>.tooltip-content,&[data-tip]:before{transform:translateX(var(--tt-trans,-50%)) translateY(var(--tt-pos,-.25rem));inset-inline:var(--tt-inset,50% auto);inset-block:var(--tt-off) auto}&:after{transform:translateX(var(--tt-trans,-50%)) translateY(var(--tt-pos,-.25rem)) rotate(180deg);inset-inline:var(--tt-tail-inset,50% auto);inset-block:var(--tt-tail) auto}}}.sm\:tooltip-left{@layer daisyui.l1.l2{&>.tooltip-content,&[data-tip]:before{transform:translateX(calc(var(--tt-pos,.25rem) - .25rem)) translateY(var(--tt-trans,-50%));inset-inline:auto var(--tt-off);inset-block:var(--tt-inset,50% auto)}&:after{transform:translateX(var(--tt-pos,.25rem)) translateY(var(--tt-trans,-50%)) rotate(-90deg);inset-inline:auto calc(var(--tt-tail) + 1px);inset-block:var(--tt-tail-inset,50% auto)}}}.sm\:tooltip-right{@layer daisyui.l1.l2{&>.tooltip-content,&[data-tip]:before{transform:translateX(calc(var(--tt-pos,-.25rem) + .25rem)) translateY(var(--tt-trans,-50%));inset-inline:var(--tt-off) auto;inset-block:var(--tt-inset,50% auto)}&:after{transform:translateX(var(--tt-pos,-.25rem)) translateY(var(--tt-trans,-50%)) rotate(90deg);inset-inline:calc(var(--tt-tail) + 1px) auto;inset-block:var(--tt-tail-inset,50% auto)}}}.sm\:tooltip-start{@layer daisyui.l1.l2{--tt-trans:0;--tt-inset:0 auto;--tt-tail-inset:var(--tt-tail-off) auto}}.sm\:tooltip-center{@layer daisyui.l1.l2{--tt-trans:-50%;--tt-inset:50% auto;--tt-tail-inset:50% auto}}.sm\:tooltip-end{@layer daisyui.l1.l2{--tt-trans:0;--tt-inset:auto 0;--tt-tail-inset:auto var(--tt-tail-off)}}.sm\:tooltip-primary{@layer daisyui.l1.l2{--tt-bg:var(--color-primary);&>.tooltip-content,&[data-tip]:before{color:var(--color-primary-content)}}}.sm\:tooltip-secondary{@layer daisyui.l1.l2{--tt-bg:var(--color-secondary);&>.tooltip-content,&[data-tip]:before{color:var(--color-secondary-content)}}}.sm\:tooltip-accent{@layer daisyui.l1.l2{--tt-bg:var(--color-accent);&>.tooltip-content,&[data-tip]:before{color:var(--color-accent-content)}}}.sm\:tooltip-info{@layer daisyui.l1.l2{--tt-bg:var(--color-info);&>.tooltip-content,&[data-tip]:before{color:var(--color-info-content)}}}.sm\:tooltip-success{@layer daisyui.l1.l2{--tt-bg:var(--color-success);&>.tooltip-content,&[data-tip]:before{color:var(--color-success-content)}}}.sm\:tooltip-warning{@layer daisyui.l1.l2{--tt-bg:var(--color-warning);&>.tooltip-content,&[data-tip]:before{color:var(--color-warning-content)}}}.sm\:tooltip-error{@layer daisyui.l1.l2{--tt-bg:var(--color-error);&>.tooltip-content,&[data-tip]:before{color:var(--color-error-content)}}}}@media (width>=768px){.md\:tooltip{@layer daisyui.l1.l2.l3{--tt-bg:var(--color-neutral);--tt-off:calc(100% + .5rem);--tt-tail:calc(100% + 1px + .25rem);--tt-tail-off:.5rem;display:inline-block;position:relative;&>.tooltip-content,&[data-tip]:before{border-radius:var(--radius-field);text-align:center;white-space:normal;max-width:20rem;color:var(--color-neutral-content);opacity:0;background-color:var(--tt-bg);pointer-events:none;z-index:2;--tw-content:attr(data-tip);content:var(--tw-content);width:max-content;padding-block:.25rem;padding-inline:.5rem;font-size:.875rem;line-height:1.25;position:absolute}&:after{opacity:0;background-color:var(--tt-bg);content:"";pointer-events:none;--mask-tooltip:url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A");width:.625rem;height:.25rem;mask-position:-1px 0;mask-repeat:no-repeat;mask-image:var(--mask-tooltip);display:block;position:absolute}@media (prefers-reduced-motion:no-preference){&>.tooltip-content,&[data-tip]:before,&:after{transition:opacity .2s cubic-bezier(.4,0,.2,1) 75ms,transform .2s cubic-bezier(.4,0,.2,1) 75ms}}&:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))){&.tooltip-open,&:hover,&:has(:focus-visible){&>.tooltip-content,&[data-tip]:before,&:after{opacity:1;--tt-pos:0rem;@media (prefers-reduced-motion:no-preference){transition:opacity .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1)}}}}}}.md\:tooltip,.md\:tooltip-top{@layer daisyui.l1.l2{&>.tooltip-content,&[data-tip]:before{transform:translateX(var(--tt-trans,-50%)) translateY(var(--tt-pos,.25rem));inset-inline:var(--tt-inset,50% auto);inset-block:auto var(--tt-off)}&:after{transform:translateX(var(--tt-trans,-50%)) translateY(var(--tt-pos,.25rem));inset-inline:var(--tt-tail-inset,50% auto);inset-block:auto var(--tt-tail)}}}.md\:tooltip-bottom{@layer daisyui.l1.l2{&>.tooltip-content,&[data-tip]:before{transform:translateX(var(--tt-trans,-50%)) translateY(var(--tt-pos,-.25rem));inset-inline:var(--tt-inset,50% auto);inset-block:var(--tt-off) auto}&:after{transform:translateX(var(--tt-trans,-50%)) translateY(var(--tt-pos,-.25rem)) rotate(180deg);inset-inline:var(--tt-tail-inset,50% auto);inset-block:var(--tt-tail) auto}}}.md\:tooltip-left{@layer daisyui.l1.l2{&>.tooltip-content,&[data-tip]:before{transform:translateX(calc(var(--tt-pos,.25rem) - .25rem)) translateY(var(--tt-trans,-50%));inset-inline:auto var(--tt-off);inset-block:var(--tt-inset,50% auto)}&:after{transform:translateX(var(--tt-pos,.25rem)) translateY(var(--tt-trans,-50%)) rotate(-90deg);inset-inline:auto calc(var(--tt-tail) + 1px);inset-block:var(--tt-tail-inset,50% auto)}}}.md\:tooltip-right{@layer daisyui.l1.l2{&>.tooltip-content,&[data-tip]:before{transform:translateX(calc(var(--tt-pos,-.25rem) + .25rem)) translateY(var(--tt-trans,-50%));inset-inline:var(--tt-off) auto;inset-block:var(--tt-inset,50% auto)}&:after{transform:translateX(var(--tt-pos,-.25rem)) translateY(var(--tt-trans,-50%)) rotate(90deg);inset-inline:calc(var(--tt-tail) + 1px) auto;inset-block:var(--tt-tail-inset,50% auto)}}}.md\:tooltip-start{@layer daisyui.l1.l2{--tt-trans:0;--tt-inset:0 auto;--tt-tail-inset:var(--tt-tail-off) auto}}.md\:tooltip-center{@layer daisyui.l1.l2{--tt-trans:-50%;--tt-inset:50% auto;--tt-tail-inset:50% auto}}.md\:tooltip-end{@layer daisyui.l1.l2{--tt-trans:0;--tt-inset:auto 0;--tt-tail-inset:auto var(--tt-tail-off)}}.md\:tooltip-primary{@layer daisyui.l1.l2{--tt-bg:var(--color-primary);&>.tooltip-content,&[data-tip]:before{color:var(--color-primary-content)}}}.md\:tooltip-secondary{@layer daisyui.l1.l2{--tt-bg:var(--color-secondary);&>.tooltip-content,&[data-tip]:before{color:var(--color-secondary-content)}}}.md\:tooltip-accent{@layer daisyui.l1.l2{--tt-bg:var(--color-accent);&>.tooltip-content,&[data-tip]:before{color:var(--color-accent-content)}}}.md\:tooltip-info{@layer daisyui.l1.l2{--tt-bg:var(--color-info);&>.tooltip-content,&[data-tip]:before{color:var(--color-info-content)}}}.md\:tooltip-success{@layer daisyui.l1.l2{--tt-bg:var(--color-success);&>.tooltip-content,&[data-tip]:before{color:var(--color-success-content)}}}.md\:tooltip-warning{@layer daisyui.l1.l2{--tt-bg:var(--color-warning);&>.tooltip-content,&[data-tip]:before{color:var(--color-warning-content)}}}.md\:tooltip-error{@layer daisyui.l1.l2{--tt-bg:var(--color-error);&>.tooltip-content,&[data-tip]:before{color:var(--color-error-content)}}}}@media (width>=1024px){.lg\:tooltip{@layer daisyui.l1.l2.l3{--tt-bg:var(--color-neutral);--tt-off:calc(100% + .5rem);--tt-tail:calc(100% + 1px + .25rem);--tt-tail-off:.5rem;display:inline-block;position:relative;&>.tooltip-content,&[data-tip]:before{border-radius:var(--radius-field);text-align:center;white-space:normal;max-width:20rem;color:var(--color-neutral-content);opacity:0;background-color:var(--tt-bg);pointer-events:none;z-index:2;--tw-content:attr(data-tip);content:var(--tw-content);width:max-content;padding-block:.25rem;padding-inline:.5rem;font-size:.875rem;line-height:1.25;position:absolute}&:after{opacity:0;background-color:var(--tt-bg);content:"";pointer-events:none;--mask-tooltip:url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A");width:.625rem;height:.25rem;mask-position:-1px 0;mask-repeat:no-repeat;mask-image:var(--mask-tooltip);display:block;position:absolute}@media (prefers-reduced-motion:no-preference){&>.tooltip-content,&[data-tip]:before,&:after{transition:opacity .2s cubic-bezier(.4,0,.2,1) 75ms,transform .2s cubic-bezier(.4,0,.2,1) 75ms}}&:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))){&.tooltip-open,&:hover,&:has(:focus-visible){&>.tooltip-content,&[data-tip]:before,&:after{opacity:1;--tt-pos:0rem;@media (prefers-reduced-motion:no-preference){transition:opacity .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1)}}}}}}.lg\:tooltip,.lg\:tooltip-top{@layer daisyui.l1.l2{&>.tooltip-content,&[data-tip]:before{transform:translateX(var(--tt-trans,-50%)) translateY(var(--tt-pos,.25rem));inset-inline:var(--tt-inset,50% auto);inset-block:auto var(--tt-off)}&:after{transform:translateX(var(--tt-trans,-50%)) translateY(var(--tt-pos,.25rem));inset-inline:var(--tt-tail-inset,50% auto);inset-block:auto var(--tt-tail)}}}.lg\:tooltip-bottom{@layer daisyui.l1.l2{&>.tooltip-content,&[data-tip]:before{transform:translateX(var(--tt-trans,-50%)) translateY(var(--tt-pos,-.25rem));inset-inline:var(--tt-inset,50% auto);inset-block:var(--tt-off) auto}&:after{transform:translateX(var(--tt-trans,-50%)) translateY(var(--tt-pos,-.25rem)) rotate(180deg);inset-inline:var(--tt-tail-inset,50% auto);inset-block:var(--tt-tail) auto}}}.lg\:tooltip-left{@layer daisyui.l1.l2{&>.tooltip-content,&[data-tip]:before{transform:translateX(calc(var(--tt-pos,.25rem) - .25rem)) translateY(var(--tt-trans,-50%));inset-inline:auto var(--tt-off);inset-block:var(--tt-inset,50% auto)}&:after{transform:translateX(var(--tt-pos,.25rem)) translateY(var(--tt-trans,-50%)) rotate(-90deg);inset-inline:auto calc(var(--tt-tail) + 1px);inset-block:var(--tt-tail-inset,50% auto)}}}.lg\:tooltip-right{@layer daisyui.l1.l2{&>.tooltip-content,&[data-tip]:before{transform:translateX(calc(var(--tt-pos,-.25rem) + .25rem)) translateY(var(--tt-trans,-50%));inset-inline:var(--tt-off) auto;inset-block:var(--tt-inset,50% auto)}&:after{transform:translateX(var(--tt-pos,-.25rem)) translateY(var(--tt-trans,-50%)) rotate(90deg);inset-inline:calc(var(--tt-tail) + 1px) auto;inset-block:var(--tt-tail-inset,50% auto)}}}.lg\:tooltip-start{@layer daisyui.l1.l2{--tt-trans:0;--tt-inset:0 auto;--tt-tail-inset:var(--tt-tail-off) auto}}.lg\:tooltip-center{@layer daisyui.l1.l2{--tt-trans:-50%;--tt-inset:50% auto;--tt-tail-inset:50% auto}}.lg\:tooltip-end{@layer daisyui.l1.l2{--tt-trans:0;--tt-inset:auto 0;--tt-tail-inset:auto var(--tt-tail-off)}}.lg\:tooltip-primary{@layer daisyui.l1.l2{--tt-bg:var(--color-primary);&>.tooltip-content,&[data-tip]:before{color:var(--color-primary-content)}}}.lg\:tooltip-secondary{@layer daisyui.l1.l2{--tt-bg:var(--color-secondary);&>.tooltip-content,&[data-tip]:before{color:var(--color-secondary-content)}}}.lg\:tooltip-accent{@layer daisyui.l1.l2{--tt-bg:var(--color-accent);&>.tooltip-content,&[data-tip]:before{color:var(--color-accent-content)}}}.lg\:tooltip-info{@layer daisyui.l1.l2{--tt-bg:var(--color-info);&>.tooltip-content,&[data-tip]:before{color:var(--color-info-content)}}}.lg\:tooltip-success{@layer daisyui.l1.l2{--tt-bg:var(--color-success);&>.tooltip-content,&[data-tip]:before{color:var(--color-success-content)}}}.lg\:tooltip-warning{@layer daisyui.l1.l2{--tt-bg:var(--color-warning);&>.tooltip-content,&[data-tip]:before{color:var(--color-warning-content)}}}.lg\:tooltip-error{@layer daisyui.l1.l2{--tt-bg:var(--color-error);&>.tooltip-content,&[data-tip]:before{color:var(--color-error-content)}}}}@media (width>=1280px){.xl\:tooltip{@layer daisyui.l1.l2.l3{--tt-bg:var(--color-neutral);--tt-off:calc(100% + .5rem);--tt-tail:calc(100% + 1px + .25rem);--tt-tail-off:.5rem;display:inline-block;position:relative;&>.tooltip-content,&[data-tip]:before{border-radius:var(--radius-field);text-align:center;white-space:normal;max-width:20rem;color:var(--color-neutral-content);opacity:0;background-color:var(--tt-bg);pointer-events:none;z-index:2;--tw-content:attr(data-tip);content:var(--tw-content);width:max-content;padding-block:.25rem;padding-inline:.5rem;font-size:.875rem;line-height:1.25;position:absolute}&:after{opacity:0;background-color:var(--tt-bg);content:"";pointer-events:none;--mask-tooltip:url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A");width:.625rem;height:.25rem;mask-position:-1px 0;mask-repeat:no-repeat;mask-image:var(--mask-tooltip);display:block;position:absolute}@media (prefers-reduced-motion:no-preference){&>.tooltip-content,&[data-tip]:before,&:after{transition:opacity .2s cubic-bezier(.4,0,.2,1) 75ms,transform .2s cubic-bezier(.4,0,.2,1) 75ms}}&:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))){&.tooltip-open,&:hover,&:has(:focus-visible){&>.tooltip-content,&[data-tip]:before,&:after{opacity:1;--tt-pos:0rem;@media (prefers-reduced-motion:no-preference){transition:opacity .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1)}}}}}}.xl\:tooltip,.xl\:tooltip-top{@layer daisyui.l1.l2{&>.tooltip-content,&[data-tip]:before{transform:translateX(var(--tt-trans,-50%)) translateY(var(--tt-pos,.25rem));inset-inline:var(--tt-inset,50% auto);inset-block:auto var(--tt-off)}&:after{transform:translateX(var(--tt-trans,-50%)) translateY(var(--tt-pos,.25rem));inset-inline:var(--tt-tail-inset,50% auto);inset-block:auto var(--tt-tail)}}}.xl\:tooltip-bottom{@layer daisyui.l1.l2{&>.tooltip-content,&[data-tip]:before{transform:translateX(var(--tt-trans,-50%)) translateY(var(--tt-pos,-.25rem));inset-inline:var(--tt-inset,50% auto);inset-block:var(--tt-off) auto}&:after{transform:translateX(var(--tt-trans,-50%)) translateY(var(--tt-pos,-.25rem)) rotate(180deg);inset-inline:var(--tt-tail-inset,50% auto);inset-block:var(--tt-tail) auto}}}.xl\:tooltip-left{@layer daisyui.l1.l2{&>.tooltip-content,&[data-tip]:before{transform:translateX(calc(var(--tt-pos,.25rem) - .25rem)) translateY(var(--tt-trans,-50%));inset-inline:auto var(--tt-off);inset-block:var(--tt-inset,50% auto)}&:after{transform:translateX(var(--tt-pos,.25rem)) translateY(var(--tt-trans,-50%)) rotate(-90deg);inset-inline:auto calc(var(--tt-tail) + 1px);inset-block:var(--tt-tail-inset,50% auto)}}}.xl\:tooltip-right{@layer daisyui.l1.l2{&>.tooltip-content,&[data-tip]:before{transform:translateX(calc(var(--tt-pos,-.25rem) + .25rem)) translateY(var(--tt-trans,-50%));inset-inline:var(--tt-off) auto;inset-block:var(--tt-inset,50% auto)}&:after{transform:translateX(var(--tt-pos,-.25rem)) translateY(var(--tt-trans,-50%)) rotate(90deg);inset-inline:calc(var(--tt-tail) + 1px) auto;inset-block:var(--tt-tail-inset,50% auto)}}}.xl\:tooltip-start{@layer daisyui.l1.l2{--tt-trans:0;--tt-inset:0 auto;--tt-tail-inset:var(--tt-tail-off) auto}}.xl\:tooltip-center{@layer daisyui.l1.l2{--tt-trans:-50%;--tt-inset:50% auto;--tt-tail-inset:50% auto}}.xl\:tooltip-end{@layer daisyui.l1.l2{--tt-trans:0;--tt-inset:auto 0;--tt-tail-inset:auto var(--tt-tail-off)}}.xl\:tooltip-primary{@layer daisyui.l1.l2{--tt-bg:var(--color-primary);&>.tooltip-content,&[data-tip]:before{color:var(--color-primary-content)}}}.xl\:tooltip-secondary{@layer daisyui.l1.l2{--tt-bg:var(--color-secondary);&>.tooltip-content,&[data-tip]:before{color:var(--color-secondary-content)}}}.xl\:tooltip-accent{@layer daisyui.l1.l2{--tt-bg:var(--color-accent);&>.tooltip-content,&[data-tip]:before{color:var(--color-accent-content)}}}.xl\:tooltip-info{@layer daisyui.l1.l2{--tt-bg:var(--color-info);&>.tooltip-content,&[data-tip]:before{color:var(--color-info-content)}}}.xl\:tooltip-success{@layer daisyui.l1.l2{--tt-bg:var(--color-success);&>.tooltip-content,&[data-tip]:before{color:var(--color-success-content)}}}.xl\:tooltip-warning{@layer daisyui.l1.l2{--tt-bg:var(--color-warning);&>.tooltip-content,&[data-tip]:before{color:var(--color-warning-content)}}}.xl\:tooltip-error{@layer daisyui.l1.l2{--tt-bg:var(--color-error);&>.tooltip-content,&[data-tip]:before{color:var(--color-error-content)}}}}@media (width>=1536px){.\32 xl\:tooltip{@layer daisyui.l1.l2.l3{--tt-bg:var(--color-neutral);--tt-off:calc(100% + .5rem);--tt-tail:calc(100% + 1px + .25rem);--tt-tail-off:.5rem;display:inline-block;position:relative;&>.tooltip-content,&[data-tip]:before{border-radius:var(--radius-field);text-align:center;white-space:normal;max-width:20rem;color:var(--color-neutral-content);opacity:0;background-color:var(--tt-bg);pointer-events:none;z-index:2;--tw-content:attr(data-tip);content:var(--tw-content);width:max-content;padding-block:.25rem;padding-inline:.5rem;font-size:.875rem;line-height:1.25;position:absolute}&:after{opacity:0;background-color:var(--tt-bg);content:"";pointer-events:none;--mask-tooltip:url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A");width:.625rem;height:.25rem;mask-position:-1px 0;mask-repeat:no-repeat;mask-image:var(--mask-tooltip);display:block;position:absolute}@media (prefers-reduced-motion:no-preference){&>.tooltip-content,&[data-tip]:before,&:after{transition:opacity .2s cubic-bezier(.4,0,.2,1) 75ms,transform .2s cubic-bezier(.4,0,.2,1) 75ms}}&:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))){&.tooltip-open,&:hover,&:has(:focus-visible){&>.tooltip-content,&[data-tip]:before,&:after{opacity:1;--tt-pos:0rem;@media (prefers-reduced-motion:no-preference){transition:opacity .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1)}}}}}}.\32 xl\:tooltip,.\32 xl\:tooltip-top{@layer daisyui.l1.l2{&>.tooltip-content,&[data-tip]:before{transform:translateX(var(--tt-trans,-50%)) translateY(var(--tt-pos,.25rem));inset-inline:var(--tt-inset,50% auto);inset-block:auto var(--tt-off)}&:after{transform:translateX(var(--tt-trans,-50%)) translateY(var(--tt-pos,.25rem));inset-inline:var(--tt-tail-inset,50% auto);inset-block:auto var(--tt-tail)}}}.\32 xl\:tooltip-bottom{@layer daisyui.l1.l2{&>.tooltip-content,&[data-tip]:before{transform:translateX(var(--tt-trans,-50%)) translateY(var(--tt-pos,-.25rem));inset-inline:var(--tt-inset,50% auto);inset-block:var(--tt-off) auto}&:after{transform:translateX(var(--tt-trans,-50%)) translateY(var(--tt-pos,-.25rem)) rotate(180deg);inset-inline:var(--tt-tail-inset,50% auto);inset-block:var(--tt-tail) auto}}}.\32 xl\:tooltip-left{@layer daisyui.l1.l2{&>.tooltip-content,&[data-tip]:before{transform:translateX(calc(var(--tt-pos,.25rem) - .25rem)) translateY(var(--tt-trans,-50%));inset-inline:auto var(--tt-off);inset-block:var(--tt-inset,50% auto)}&:after{transform:translateX(var(--tt-pos,.25rem)) translateY(var(--tt-trans,-50%)) rotate(-90deg);inset-inline:auto calc(var(--tt-tail) + 1px);inset-block:var(--tt-tail-inset,50% auto)}}}.\32 xl\:tooltip-right{@layer daisyui.l1.l2{&>.tooltip-content,&[data-tip]:before{transform:translateX(calc(var(--tt-pos,-.25rem) + .25rem)) translateY(var(--tt-trans,-50%));inset-inline:var(--tt-off) auto;inset-block:var(--tt-inset,50% auto)}&:after{transform:translateX(var(--tt-pos,-.25rem)) translateY(var(--tt-trans,-50%)) rotate(90deg);inset-inline:calc(var(--tt-tail) + 1px) auto;inset-block:var(--tt-tail-inset,50% auto)}}}.\32 xl\:tooltip-start{@layer daisyui.l1.l2{--tt-trans:0;--tt-inset:0 auto;--tt-tail-inset:var(--tt-tail-off) auto}}.\32 xl\:tooltip-center{@layer daisyui.l1.l2{--tt-trans:-50%;--tt-inset:50% auto;--tt-tail-inset:50% auto}}.\32 xl\:tooltip-end{@layer daisyui.l1.l2{--tt-trans:0;--tt-inset:auto 0;--tt-tail-inset:auto var(--tt-tail-off)}}.\32 xl\:tooltip-primary{@layer daisyui.l1.l2{--tt-bg:var(--color-primary);&>.tooltip-content,&[data-tip]:before{color:var(--color-primary-content)}}}.\32 xl\:tooltip-secondary{@layer daisyui.l1.l2{--tt-bg:var(--color-secondary);&>.tooltip-content,&[data-tip]:before{color:var(--color-secondary-content)}}}.\32 xl\:tooltip-accent{@layer daisyui.l1.l2{--tt-bg:var(--color-accent);&>.tooltip-content,&[data-tip]:before{color:var(--color-accent-content)}}}.\32 xl\:tooltip-info{@layer daisyui.l1.l2{--tt-bg:var(--color-info);&>.tooltip-content,&[data-tip]:before{color:var(--color-info-content)}}}.\32 xl\:tooltip-success{@layer daisyui.l1.l2{--tt-bg:var(--color-success);&>.tooltip-content,&[data-tip]:before{color:var(--color-success-content)}}}.\32 xl\:tooltip-warning{@layer daisyui.l1.l2{--tt-bg:var(--color-warning);&>.tooltip-content,&[data-tip]:before{color:var(--color-warning-content)}}}.\32 xl\:tooltip-error{@layer daisyui.l1.l2{--tt-bg:var(--color-error);&>.tooltip-content,&[data-tip]:before{color:var(--color-error-content)}}}}}