flyonui/components/tooltip.css

The easiest, free and open-source Tailwind CSS component library with semantic classes.

/*! 🚀 flyonui 2.4.0 - MIT License */ @layer utilities{.tooltip{text-align:center;display:inline-block}.tooltip-content{visibility:hidden;opacity:0;transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));z-index:20;width:max-content;padding:.5rem;display:inline-block;position:absolute}.tooltip-body{--tooltip-color:var(--color-neutral);--tooltip-text-color:var(--color-neutral-content);border-radius:var(--radius-selector);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-leading:calc(.25rem*5);--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-base-300)20%,transparent)var(--tw-shadow-alpha),transparent);background-color:var(--tooltip-color);color:var(--tooltip-text-color);padding-block:.25rem;padding-inline:.75rem;line-height:1.25rem}.tooltip-primary{--tooltip-color:var(--color-primary);--tooltip-text-color:var(--color-primary-content)}.tooltip-secondary{--tooltip-color:var(--color-secondary);--tooltip-text-color:var(--color-secondary-content)}.tooltip-accent{--tooltip-color:var(--color-accent);--tooltip-text-color:var(--color-accent-content)}.tooltip-info{--tooltip-color:var(--color-info);--tooltip-text-color:var(--color-info-content)}.tooltip-success{--tooltip-color:var(--color-success);--tooltip-text-color:var(--color-success-content)}.tooltip-warning{--tooltip-color:var(--color-warning);--tooltip-text-color:var(--color-warning-content)}.tooltip-error{--tooltip-color:var(--color-error);--tooltip-text-color:var(--color-error-content)}@media (width>=640px){.sm\:tooltip{text-align:center;display:inline-block}.sm\:tooltip-content{visibility:hidden;opacity:0;transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));z-index:20;width:max-content;padding:.5rem;display:inline-block;position:absolute}.sm\:tooltip-body{--tooltip-color:var(--color-neutral);--tooltip-text-color:var(--color-neutral-content);border-radius:var(--radius-selector);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-leading:calc(.25rem*5);--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-base-300)20%,transparent)var(--tw-shadow-alpha),transparent);background-color:var(--tooltip-color);color:var(--tooltip-text-color);padding-block:.25rem;padding-inline:.75rem;line-height:1.25rem}.sm\:tooltip-primary{--tooltip-color:var(--color-primary);--tooltip-text-color:var(--color-primary-content)}.sm\:tooltip-secondary{--tooltip-color:var(--color-secondary);--tooltip-text-color:var(--color-secondary-content)}.sm\:tooltip-accent{--tooltip-color:var(--color-accent);--tooltip-text-color:var(--color-accent-content)}.sm\:tooltip-info{--tooltip-color:var(--color-info);--tooltip-text-color:var(--color-info-content)}.sm\:tooltip-success{--tooltip-color:var(--color-success);--tooltip-text-color:var(--color-success-content)}.sm\:tooltip-warning{--tooltip-color:var(--color-warning);--tooltip-text-color:var(--color-warning-content)}.sm\:tooltip-error{--tooltip-color:var(--color-error);--tooltip-text-color:var(--color-error-content)}}@media (width>=768px){.md\:tooltip{text-align:center;display:inline-block}.md\:tooltip-content{visibility:hidden;opacity:0;transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));z-index:20;width:max-content;padding:.5rem;display:inline-block;position:absolute}.md\:tooltip-body{--tooltip-color:var(--color-neutral);--tooltip-text-color:var(--color-neutral-content);border-radius:var(--radius-selector);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-leading:calc(.25rem*5);--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-base-300)20%,transparent)var(--tw-shadow-alpha),transparent);background-color:var(--tooltip-color);color:var(--tooltip-text-color);padding-block:.25rem;padding-inline:.75rem;line-height:1.25rem}.md\:tooltip-primary{--tooltip-color:var(--color-primary);--tooltip-text-color:var(--color-primary-content)}.md\:tooltip-secondary{--tooltip-color:var(--color-secondary);--tooltip-text-color:var(--color-secondary-content)}.md\:tooltip-accent{--tooltip-color:var(--color-accent);--tooltip-text-color:var(--color-accent-content)}.md\:tooltip-info{--tooltip-color:var(--color-info);--tooltip-text-color:var(--color-info-content)}.md\:tooltip-success{--tooltip-color:var(--color-success);--tooltip-text-color:var(--color-success-content)}.md\:tooltip-warning{--tooltip-color:var(--color-warning);--tooltip-text-color:var(--color-warning-content)}.md\:tooltip-error{--tooltip-color:var(--color-error);--tooltip-text-color:var(--color-error-content)}}@media (width>=1024px){.lg\:tooltip{text-align:center;display:inline-block}.lg\:tooltip-content{visibility:hidden;opacity:0;transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));z-index:20;width:max-content;padding:.5rem;display:inline-block;position:absolute}.lg\:tooltip-body{--tooltip-color:var(--color-neutral);--tooltip-text-color:var(--color-neutral-content);border-radius:var(--radius-selector);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-leading:calc(.25rem*5);--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-base-300)20%,transparent)var(--tw-shadow-alpha),transparent);background-color:var(--tooltip-color);color:var(--tooltip-text-color);padding-block:.25rem;padding-inline:.75rem;line-height:1.25rem}.lg\:tooltip-primary{--tooltip-color:var(--color-primary);--tooltip-text-color:var(--color-primary-content)}.lg\:tooltip-secondary{--tooltip-color:var(--color-secondary);--tooltip-text-color:var(--color-secondary-content)}.lg\:tooltip-accent{--tooltip-color:var(--color-accent);--tooltip-text-color:var(--color-accent-content)}.lg\:tooltip-info{--tooltip-color:var(--color-info);--tooltip-text-color:var(--color-info-content)}.lg\:tooltip-success{--tooltip-color:var(--color-success);--tooltip-text-color:var(--color-success-content)}.lg\:tooltip-warning{--tooltip-color:var(--color-warning);--tooltip-text-color:var(--color-warning-content)}.lg\:tooltip-error{--tooltip-color:var(--color-error);--tooltip-text-color:var(--color-error-content)}}@media (width>=1280px){.xl\:tooltip{text-align:center;display:inline-block}.xl\:tooltip-content{visibility:hidden;opacity:0;transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));z-index:20;width:max-content;padding:.5rem;display:inline-block;position:absolute}.xl\:tooltip-body{--tooltip-color:var(--color-neutral);--tooltip-text-color:var(--color-neutral-content);border-radius:var(--radius-selector);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-leading:calc(.25rem*5);--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-base-300)20%,transparent)var(--tw-shadow-alpha),transparent);background-color:var(--tooltip-color);color:var(--tooltip-text-color);padding-block:.25rem;padding-inline:.75rem;line-height:1.25rem}.xl\:tooltip-primary{--tooltip-color:var(--color-primary);--tooltip-text-color:var(--color-primary-content)}.xl\:tooltip-secondary{--tooltip-color:var(--color-secondary);--tooltip-text-color:var(--color-secondary-content)}.xl\:tooltip-accent{--tooltip-color:var(--color-accent);--tooltip-text-color:var(--color-accent-content)}.xl\:tooltip-info{--tooltip-color:var(--color-info);--tooltip-text-color:var(--color-info-content)}.xl\:tooltip-success{--tooltip-color:var(--color-success);--tooltip-text-color:var(--color-success-content)}.xl\:tooltip-warning{--tooltip-color:var(--color-warning);--tooltip-text-color:var(--color-warning-content)}.xl\:tooltip-error{--tooltip-color:var(--color-error);--tooltip-text-color:var(--color-error-content)}}@media (width>=1536px){.\32 xl\:tooltip{text-align:center;display:inline-block}.\32 xl\:tooltip-content{visibility:hidden;opacity:0;transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));z-index:20;width:max-content;padding:.5rem;display:inline-block;position:absolute}.\32 xl\:tooltip-body{--tooltip-color:var(--color-neutral);--tooltip-text-color:var(--color-neutral-content);border-radius:var(--radius-selector);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-leading:calc(.25rem*5);--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-base-300)20%,transparent)var(--tw-shadow-alpha),transparent);background-color:var(--tooltip-color);color:var(--tooltip-text-color);padding-block:.25rem;padding-inline:.75rem;line-height:1.25rem}.\32 xl\:tooltip-primary{--tooltip-color:var(--color-primary);--tooltip-text-color:var(--color-primary-content)}.\32 xl\:tooltip-secondary{--tooltip-color:var(--color-secondary);--tooltip-text-color:var(--color-secondary-content)}.\32 xl\:tooltip-accent{--tooltip-color:var(--color-accent);--tooltip-text-color:var(--color-accent-content)}.\32 xl\:tooltip-info{--tooltip-color:var(--color-info);--tooltip-text-color:var(--color-info-content)}.\32 xl\:tooltip-success{--tooltip-color:var(--color-success);--tooltip-text-color:var(--color-success-content)}.\32 xl\:tooltip-warning{--tooltip-color:var(--color-warning);--tooltip-text-color:var(--color-warning-content)}.\32 xl\:tooltip-error{--tooltip-color:var(--color-error);--tooltip-text-color:var(--color-error-content)}}}