frutjam/dist/components/tooltip/object.js

A utility-first CSS UI Library for Tailwind CSS

export default {".tooltip":{"position":"relative","display":"inline-block","--color-tooltip":"var(--color-neutral)","--color-on-tooltip":"var(--color-on-neutral)","--tooltip-content":"calc(100% + 0.5rem)","--tooltip-tail":"calc(100% + 1px + 0.25rem)","--radius-tooltip":"calc(var(--border-radius) * 2)","& > .tooltip-content,\n    &[data-tip]:before":{"color":"var(--color-on-tooltip)","border-radius":"var(--radius-tooltip)","position":"absolute","max-width":"20rem","padding-inline":"0.5rem","padding-block":"0.25rem","opacity":"0%","text-align":"center","white-space":"normal","font-size":"0.875rem","line-height":1.25,"background-color":"var(--color-tooltip)","width":"max-content","pointer-events":"none","z-index":2,"--tw-content":"attr(data-tip)","content":"var(--tw-content)","transform":"translateX(-50%) translateY(var(--tooltip-placement, 0.25rem))","inset":"auto auto var(--tooltip-content) 50%"},"&:after":{"background-color":"var(--color-tooltip)","content":"\"\"","pointer-events":"none","width":"0.625rem","height":"0.25rem","display":"block","position":"absolute","opacity":"0%","-webkit-mask-repeat":"no-repeat","mask-repeat":"no-repeat","-webkit-mask-position":"-1px 0","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\")","-webkit-mask-image":"var(--mask-tooltip)","mask-image":"var(--mask-tooltip)","transform":"translateX(-50%) translateY(var(--tooltip-placement, 0.25rem))","inset":"auto auto var(--tooltip-tail) 50%"},"@media (prefers-reduced-motion: no-preference)":{"& > .tooltip-content,\n      &[data-tip]:before,\n      &:after":{"transition":"opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms,\n          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,\n      &:hover,\n      &:focus-within":{"& > .tooltip-content,\n        &[data-tip]:before,\n        &:after":{"opacity":"100%","--tooltip-placement":"0rem","@media (prefers-reduced-motion: no-preference)":{"transition":"opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s,\n              transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s"}}}}},".tooltip-end":{"&>.tooltip-content,\n    &[data-tip]:before":{"transform":"translateX(calc(var(--tooltip-placement, -0.25rem) + 0.25rem)) translateY(-50%)","inset":"50% auto auto var(--tooltip-content)","z-index":50},"&:where(:dir(rtl), [dir=\"rtl\"], [dir=\"rtl\"] *)":{"&>.tooltip-content,\n        &[data-tip]:before":{"transform":"translateX(calc(var(--tooltip-placement, 0.25rem) - 0.25rem)) translateY(-50%)","inset":"50% var(--tooltip-content) auto auto","z-index":50},"&::after":{"content":"\"\"","transform":"translateX(var(--tooltip-placement, 0.25rem)) translateY(-50%) rotate(-90deg)","inset":"50% calc(var(--tooltip-tail) + 1px) auto auto","z-index":50}},"&::after":{"content":"\"\"","transform":"translateX(var(--tooltip-placement, -0.25rem)) translateY(-50%) rotate(90deg)","inset":"50% auto auto calc(var(--tooltip-tail) + 1px)","z-index":50}},".tooltip-start":{"&>.tooltip-content,\n    &[data-tip]:before":{"transform":"translateX(calc(var(--tooltip-placement, 0.25rem) - 0.25rem)) translateY(-50%)","inset":"50% var(--tooltip-content) auto auto","z-index":50},"&:where(:dir(rtl), [dir=\"rtl\"], [dir=\"rtl\"] *)":{"&>.tooltip-content,\n        &[data-tip]:before":{"transform":"translateX(calc(var(--tooltip-placement, -0.25rem) + 0.25rem)) translateY(-50%)","inset":"50% auto auto var(--tooltip-content)","z-index":50},"&::after":{"content":"\"\"","transform":"translateX(var(--tooltip-placement, -0.25rem)) translateY(-50%) rotate(90deg)","inset":"50% auto auto calc(var(--tooltip-tail) + 1px)","z-index":50}},"&::after":{"content":"\"\"","transform":"translateX(var(--tooltip-placement, 0.25rem)) translateY(-50%) rotate(-90deg)","inset":"50% calc(var(--tooltip-tail) + 1px) auto auto","z-index":50}},".tooltip-bottom":{"&>.tooltip-content,\n    &[data-tip]:before":{"transform":"translateX(-50%) translateY(var(--tooltip-placement, -0.25rem))","inset":"var(--tooltip-content) auto auto 50%","z-index":50},"&::after":{"content":"\"\"","transform":"translateX(-50%) translateY(var(--tooltip-placement, -0.25rem)) rotate(180deg)","inset":"var(--tooltip-tail) auto auto 50%","z-index":50}},".tooltip-left":{"&>.tooltip-content,\n    &[data-tip]:before":{"transform":"translateX(calc(var(--tooltip-placement, 0.25rem) - 0.25rem)) translateY(-50%)","inset":"50% var(--tooltip-content) auto auto","z-index":50},"&::after":{"content":"\"\"","transform":"translateX(var(--tooltip-placement, 0.25rem)) translateY(-50%) rotate(-90deg)","inset":"50% calc(var(--tooltip-tail) + 1px) auto auto","z-index":50}},".tooltip-right":{"&>.tooltip-content,\n    &[data-tip]:before":{"transform":"translateX(calc(var(--tooltip-placement, -0.25rem) + 0.25rem)) translateY(-50%)","inset":"50% auto auto var(--tooltip-content)","z-index":50},"&::after":{"content":"\"\"","transform":"translateX(var(--tooltip-placement, -0.25rem)) translateY(-50%) rotate(90deg)","inset":"50% auto auto calc(var(--tooltip-tail) + 1px)","z-index":50}},".tooltip-top":{"&>.tooltip-content,\n    &[data-tip]:before":{"transform":"translateX(-50%) translateY(var(--tooltip-placement, 0.25rem))","inset":"auto auto var(--tooltip-content) 50%","z-index":50},"&::after":{"content":"\"\"","transform":"translateX(-50%) translateY(var(--tooltip-placement, 0.25rem))","inset":"auto auto var(--tooltip-tail) 50%","z-index":50}},".tooltip-accent":{"--color-tooltip":"var(--color-accent)","--color-on-tooltip":"var(--color-on-accent)"},".tooltip-error":{"--color-tooltip":"var(--color-error)","--color-on-tooltip":"var(--color-on-error)"},".tooltip-info":{"--color-tooltip":"var(--color-info)","--color-on-tooltip":"var(--color-on-info)"},".tooltip-neutral":{"--color-tooltip":"var(--color-neutral)","--color-on-tooltip":"var(--color-on-neutral)"},".tooltip-primary":{"--color-tooltip":"var(--color-primary)","--color-on-tooltip":"var(--color-on-primary)"},".tooltip-secondary":{"--color-tooltip":"var(--color-secondary)","--color-on-tooltip":"var(--color-on-secondary)"},".tooltip-success":{"--color-tooltip":"var(--color-success)","--color-on-tooltip":"var(--color-on-success)"},".tooltip-warning":{"--color-tooltip":"var(--color-warning)","--color-on-tooltip":"var(--color-on-warning)"},".tooltip-content":{"--fj-tooltip-scope":"1"}};