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

| Name | Type | Description | | --------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- | | children | React.ReactNode | The element that the tooltip will be attached to. | | title | React.ReactNode | The content of the tooltip. | | placement* | top \| top-start \| top-end \| bottom \| bottom-start \| bottom-end \| left \| left-start \| left-end \| right \| right-start \| right-end | TThe preferred position of the tooltip. Default bottom | | followCursor* | boolean | Whether the tooltip should follow the cursor. Default false | | arrow* | boolean | Whether to display an arrow pointing to the element. Default false | | open* | boolean | Control the visibility of the tooltip. | | tooltipStyle* | string | Style of the tooltip. Default bg-[#223354]/95 text-white text-sm | | arrowStyle* | string | Style of the arrow. Default to-[#223354]/95 | | enterDelay* | number | Delay in milliseconds before the tooltip appears. Default 100 | | leaveDelay* | number | Delay in milliseconds before the tooltip disappears. Default 100 | | onOpen* | (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void | Callback function triggered when the tooltip opens. | | onClose* | (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void | Callback function triggered when the tooltip closes. |

Props marked with * are not required.