Premium Tooltip Component - Copy this Html, Tailwind Component to your project
Generate-HTML,-CSS-(using-Tailwind-CSS),-and-JavaScript-code-for-a-premium,-modern-tooltip.-The-tooltip-should-have-the-following-features:-Tooltip-Structure:-The-tooltip-should-be-displayed-above,-below,-or-beside-the-target-element.-It-should-have-a-smooth-fade-in-and-fade-out-effect-on-hover,-with-a-transition-time-of-300ms.-The-tooltip-background-should-be-dark-(e.g.,-bg-gray-800)-with-white-text-(text-white).-The-tooltip-should-have-rounded-corners-(rounded-lg),-with-a-subtle-shadow-(shadow-lg)-for-a-sleek,-premium-look.-Use-absolute-positioning-for-the-tooltip-relative-to-the-target-element,-and-ensure-it's-centered-horizontally-above-or-below-the-element.-The-tooltip-should-have-a-small-arrow-pointing-to-the-target-element,-positioned-correctly.-Responsive-Design:-The-tooltip-should-adapt-to-both-desktop-and-mobile-screens,-adjusting-its-size-and-position-accordingly.-Use-Tailwind's-responsive-utilities-to-ensure-the-tooltip's-position-and-layout-work-well-on-all-screen-sizes.-JavaScript:-The-tooltip-should-appear-when-the-user-hovers-over-the-target-element-and-disappear-when-the-hover-state-is-removed.-Ensure-that-the-tooltip-does-not-overlap-with-other-page-content,-and-it-should-dynamically-adjust-its-position-if-necessary.-Make-sure-the-tooltip-works-with-keyboard-accessibility,-allowing-the-user-to-navigate-using-the-"Tab"-key.-Include-a-smooth-fade-in-effect-(opacity-0-to-opacity-100)-and-ensure-the-transition-is-smooth-using-Tailwind's-transition-classes.-The-code-should-use-the-following-classes-for-styling:-bg-gray-800,-text-white,-rounded-lg,-shadow-lg,-transition-all,-duration-300,-ease-in-out,-opacity-0,-group-hover:opacity-100.-Position-the-tooltip-above-or-below-the-target-element-with-smooth-transitions,-using-Tailwind's-spacing-utilities.-Include-a-small-arrow-at-the-bottom-of-the-tooltip-to-point-to-the-target-element.-Use-Tailwind's-border-t-4,-border-l-4,-and-border-transparent-classes-to-create-the-arrow.-Provide-both-the-HTML-and-the-CSS-(using-Tailwind-CSS)-code-for-this-modern,-premium-tooltip.
