fadgram-ui/components/tooltip.css

Fadgram UI is a Tailwind CSS plugin that provides a set of custom utility classes to enhance your web development experience. This plugin is designed to work seamlessly with Tailwind CSS, allowing you to quickly and easily style your web applications. ![F

@layer components {
    .tooltip {
        @apply fixed z-10 py-2 px-3 text-sm text-white bg-gray-900 rounded-lg;
        @apply shadow-sm pointer-events-none transition-opacity max-w-[18rem] text-center opacity-0;

        &::after {
            @apply content-[""] absolute border-5;
        }

        &.show {
            @apply opacity-100;
        }

        &.tooltip-bottom {
            &::after {
                @apply bottom-full left-1/2 -translate-x-1/2;
                border-color: transparent transparent var(--color-gray-900) transparent;
            }
        }

        &.tooltip-top {
            &::after {
                top: 100%;
                left: 50%;
                transform: translateX(-50%);
                border-color: var(--color-gray-900) transparent transparent transparent;
            }
        }

        &.tooltip-start {
            &::after {
                inset-inline-start: 100%;
                top: 50%;
                transform: translateY(-50%);
                border-color: transparent transparent transparent var(--color-gray-900);
            }

            @variant rtl {
                &::after {
                    border-color: transparent var(--color-gray-900) transparent transparent;
                }
            }
        }

        &.tooltip-end {
            &::after {
                inset-inline-end: 100%;
                top: 50%;
                transform: translateY(-50%);
                border-color: transparent var(--color-gray-900) transparent transparent;
            }

            @variant rtl {
                &::after {
                    border-color: transparent transparent transparent var(--color-gray-900);
                }
            }
        }
    }
}