react-tailwind-tooltip v1.0.4

React tailwind tooltip

React tailwind tooltip is a React component for creating customizable tooltips using Tailwind CSS. It provides flexibility in tooltip placement, appearance, and behavior, making it easy to enhance user interfaces with informative tooltips.

Installation:

Install with npm:

npm install react-tailwind-tooltip

Install with yarn:

yarn add react-tailwind-tooltip

Install with pnpm:

pnpm add react-tailwind-tooltip

License

This project is licensed under the MIT License - see the LICENSE file for details.

Repository

For more information, issues, and contributions, visit the GitHub repository.

Preview

Open this example in StackBlitz:

Example Usage:

import React from 'react';
import { Tooltip } from 'react-tailwind-tooltip';

const App = () => {
  return (
    <div className="p-6">
      <Tooltip title="This is a tooltip!" placement="top" arrow>
        <button className="px-4 py-2 bg-blue-500 text-white rounded">Hover me</button>
      </Tooltip>
    </div>
  );
};

export default App;

Tailwind Configuration

In your tailwind.config.(js|ts):

module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './node_modules/react-tailwind-tooltip/**/*.{ts,tsx,js,jsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Monorepo Setup

If you’re working in a monorepo with workspaces, you may need to use require.resolve to ensure Tailwind can see your content files:

In tailwind.config.(js|ts):

const path = require('path');

module.exports = {
  content: [
    './components/**/*.{html,js}',
    './pages/**/*.{html,js}',
    path.join(path.dirname(require.resolve('react-tailwind-tooltip')), '**/*.{ts,tsx,js,jsx}'),
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Properties

Props marked with * are not required.