daisyui/components/tooltip/object.js

daisyUI 5 - The Tailwind CSS Component Library

export default {".tooltip":{"@layer daisyui.l1.l2.l3":{"position":"relative","display":"inline-block","--tt-bg":"var(--color-neutral)","--tt-off":"calc(100% + 0.5rem)","--tt-tail":"calc(100% + 1px + 0.25rem)","--tt-tail-off":"0.5rem","& > .tooltip-content, &[data-tip]:before":{"position":"absolute","max-width":"20rem","border-radius":"var(--radius-field)","padding-inline":"calc(0.25rem * 2)","padding-block":"0.25rem","text-align":"center","white-space":"normal","color":"var(--color-neutral-content)","opacity":"0%","font-size":"0.875rem","line-height":1.25,"background-color":"var(--tt-bg)","width":"max-content","pointer-events":"none","z-index":2,"--tw-content":"attr(data-tip)","content":"var(--tw-content)"},"&:after":{"opacity":"0%","background-color":"var(--tt-bg)","content":"\"\"","pointer-events":"none","width":"0.625rem","height":"0.25rem","display":"block","position":"absolute","mask-repeat":"no-repeat","mask-position":"-1px 0","--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\")","mask-image":"var(--mask-tooltip)"},"@media (prefers-reduced-motion: no-preference)":{"& > .tooltip-content, &[data-tip]:before, &:after":{"transition":"opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 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":"100%","--tt-pos":"0rem","@media (prefers-reduced-motion: no-preference)":{"transition":"opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s"}}}}}},".tooltip, .tooltip-top":{"@layer daisyui.l1.l2":{"> .tooltip-content, &[data-tip]:before":{"transform":"translateX(var(--tt-trans, -50%)) translateY(var(--tt-pos, 0.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, 0.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, -0.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, -0.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, 0.25rem) - 0.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, 0.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, -0.25rem) + 0.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, -0.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)"}}}};