I'm currently working on creating tooltips for icons in my header. I have created a component that combines the icon and tooltip into one div, with Tailwind CSS styles applied.
JSX Component:
const HeaderIcon = ({ icon, redirect = window.location.pathname.replace('/', ""), text = ""}:IconProps) => (
<div className="group relative flex items-center justify-center h-12 w-12 mt-2 mb-2 mx-5 cursor-pointer">
<button onClick={() => goto(redirect)} className="items-center inline-flex">{icon}</button>
<span className="group-hover:visible absolute rounded-md shadow-md text-white bg-gray-900 text-xs font-bold transition-all duration-100 p-2 text-center min-w-max invisible">
{text}
</span>
</div>
)
The 'goto' function is used for redirection, the 'icon' variable contains a JSX element from react-feather (an icon library), 'redirect' is a string specifying the redirection path, and 'text' represents the tooltip text. Which Tailwind classes should be applied to position the tooltips centered under the icons?
If you have any additional requirements or questions, please feel free to ask and I will make the necessary edits to the code.