title: React and tailwind: making tooltip
body: <p>I am trying to make tooltips for icons in my header, and right now I have made a component to make the icon and tooltip into one div, with tailwind styles in that</p>
  <p>JSX Component:</p>
  <pre><code>const HeaderIcon = ({ icon, redirect = window.location.pathname.replace('/', &quot;&quot;), text = &quot;&quot;}:IconProps) =&gt; (
          &lt;div className=&quot;group relative flex items-center justify-center h-12 w-12 mt-2 mb-2 mx-5 cursor-pointer&quot;&gt;
              &lt;button onClick={() =&gt; goto(redirect)} className=&quot;items-center inline-flex&quot;&gt;{icon}&lt;/button&gt;
              &lt;span className=&quot;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&quot;&gt;
                  {text}
              &lt;/span&gt;
          &lt;/div&gt;
      )
  </code></pre>
  <p>Here goto is a redirect function, icon is a JSX element from <a href="https://www.npmjs.com/package/feather-icons" rel="nofollow noreferrer">react-feather</a> (icon library), redirect is a string telling the button where to redirect to, and text is the tooltip text. What tailwind classes should I use to position the tooltips under the icons, centered.</p>
  <p>If there is any other things you may want then just ask and I will edit the code in.</p>