frutjam/dist/components/tooltip.css

CSS-only Tailwind CSS v4 component library. 65+ accessible UI components, zero JavaScript, WCAG AA guaranteed. Free MCP server for AI editors included.

/*! frutjam v2.2.5 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */@layer properties;.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,&[data-tip]:before{color:var(--color-on-tooltip);border-radius:var(--radius-tooltip);max-width:20rem;padding-inline:.5rem;padding-block:.25rem;text-align:center;white-space:normal;font-size:.875rem;line-height:1.25;width:-moz-max-content;width:max-content;z-index:2;--tw-content:attr(data-tip);content:var(--tw-content);inset:auto auto var(--tooltip-content) 50%}&:after,&>.tooltip-content,&[data-tip]:before{position:absolute;opacity:0;background-color:var(--color-tooltip);pointer-events:none;transform:translateX(-50%) translateY(var(--tooltip-placement,.25rem))}&:after{content:"";width:.625rem;height:.25rem;display:block;-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;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='4' fill='none' viewBox='0 0 8 4'%3E%3Cpath fill='%23000' d='M.5 1C3.5 1 3 4 5 4s1.5-3 4.5-3c.5 0 .5-.5.5-1H0c0 .5 0 1 .5 1'/%3E%3C/svg%3E");-webkit-mask-image:var(--mask-tooltip);mask-image:var(--mask-tooltip);inset:auto auto var(--tooltip-tail) 50%}@media (prefers-reduced-motion:no-preference){&:after,&>.tooltip-content,&[data-tip]:before{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))){&:is(.tooltip-open,:hover,:focus-within){&:after,&>.tooltip-content,&[data-tip]:before{opacity:100%;--tooltip-placement:0rem;@media (prefers-reduced-motion:no-preference){transition:opacity .2s cubic-bezier(.4,0,.2,1) 0s,transform .2s cubic-bezier(.4,0,.2,1) 0s}}}}}.tooltip-end>.tooltip-content,.tooltip-end[data-tip]:before{transform:translateX(calc(var(--tooltip-placement, -.25rem) + .25rem)) translateY(-50%);inset:50% auto auto var(--tooltip-content);z-index:50}.tooltip-end:where(:dir(rtl),[dir=rtl],[dir=rtl] *)>.tooltip-content,.tooltip-end:where(:dir(rtl),[dir=rtl],[dir=rtl] *)[data-tip]:before{transform:translateX(calc(var(--tooltip-placement, .25rem) - .25rem)) translateY(-50%);inset:50% var(--tooltip-content) auto auto;z-index:50}.tooltip-end:after{content:var(--tw-content);content:"";transform:translateX(var(--tooltip-placement,-.25rem)) translateY(-50%) rotate(90deg);inset:50% auto auto calc(var(--tooltip-tail) + 1px);z-index:50}.tooltip-end:where(:dir(rtl),[dir=rtl],[dir=rtl] *):after{content:var(--tw-content);content:"";transform:translateX(var(--tooltip-placement,.25rem)) translateY(-50%) rotate(-90deg);inset:50% calc(var(--tooltip-tail) + 1px) auto auto;z-index:50}.tooltip-start>.tooltip-content,.tooltip-start[data-tip]:before{transform:translateX(calc(var(--tooltip-placement, .25rem) - .25rem)) translateY(-50%);inset:50% var(--tooltip-content) auto auto;z-index:50}.tooltip-start:where(:dir(rtl),[dir=rtl],[dir=rtl] *)>.tooltip-content,.tooltip-start:where(:dir(rtl),[dir=rtl],[dir=rtl] *)[data-tip]:before{transform:translateX(calc(var(--tooltip-placement, -.25rem) + .25rem)) translateY(-50%);inset:50% auto auto var(--tooltip-content);z-index:50}.tooltip-start:after{content:var(--tw-content);content:"";transform:translateX(var(--tooltip-placement,.25rem)) translateY(-50%) rotate(-90deg);inset:50% calc(var(--tooltip-tail) + 1px) auto auto;z-index:50}.tooltip-start:where(:dir(rtl),[dir=rtl],[dir=rtl] *):after{content:var(--tw-content);content:"";transform:translateX(var(--tooltip-placement,-.25rem)) translateY(-50%) rotate(90deg);inset:50% auto auto calc(var(--tooltip-tail) + 1px);z-index:50}.tooltip-bottom>.tooltip-content,.tooltip-bottom[data-tip]:before{transform:translateX(-50%) translateY(var(--tooltip-placement,-.25rem));inset:var(--tooltip-content) auto auto 50%;z-index:50}.tooltip-bottom:after{content:var(--tw-content);content:"";transform:translateX(-50%) translateY(var(--tooltip-placement,-.25rem)) rotate(180deg);inset:var(--tooltip-tail) auto auto 50%;z-index:50}.tooltip-left>.tooltip-content,.tooltip-left[data-tip]:before{transform:translateX(calc(var(--tooltip-placement, .25rem) - .25rem)) translateY(-50%);inset:50% var(--tooltip-content) auto auto;z-index:50}.tooltip-left:after{content:var(--tw-content);content:"";transform:translateX(var(--tooltip-placement,.25rem)) translateY(-50%) rotate(-90deg);inset:50% calc(var(--tooltip-tail) + 1px) auto auto;z-index:50}.tooltip-right>.tooltip-content,.tooltip-right[data-tip]:before{transform:translateX(calc(var(--tooltip-placement, -.25rem) + .25rem)) translateY(-50%);inset:50% auto auto var(--tooltip-content);z-index:50}.tooltip-right:after{content:var(--tw-content);content:"";transform:translateX(var(--tooltip-placement,-.25rem)) translateY(-50%) rotate(90deg);inset:50% auto auto calc(var(--tooltip-tail) + 1px);z-index:50}.tooltip-top>.tooltip-content,.tooltip-top[data-tip]:before{inset:auto auto var(--tooltip-content) 50%}.tooltip-top:after,.tooltip-top>.tooltip-content,.tooltip-top[data-tip]:before{transform:translateX(-50%) translateY(var(--tooltip-placement,.25rem));z-index:50}.tooltip-top:after{content:var(--tw-content);content:"";inset:auto auto var(--tooltip-tail) 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}@property --tw-content{syntax:"*";initial-value:"";inherits:false}@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-content:""}}}