Блог

Я пытаюсь создать всплывающие подсказки для значков в моем заголовке, и прямо сейчас я создал компонент для объединения значка и всплывающей подсказки в один div со стилями tailwind

Компонент JSX:

 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>
    )
 

Здесь goto — это функция перенаправления, icon — это элемент JSX из react-feather (библиотека значков), redirect — это строка, указывающая кнопке, куда нужно перенаправить, а text — это текст всплывающей подсказки. Какие классы tailwind следует использовать для размещения всплывающих подсказок под значками по центру.

Если есть какие-либо другие вещи, которые вы можете захотеть, просто спросите, и я отредактирую код.

вам нужно создать новый вариант group-hover для плагина visibility в конфигурации Tailwind:

 // tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      visibility: ['group-hover'],
    }
  },
}