React SaaS Tooltips

A comprehensive React tooltip library that provides intelligent, animated, and contextually-aware user interface guidance for SaaS applications.

Features

• 20+ pre-built tooltips for common SaaS workflows
• Advanced animations with Framer Motion
• Consistent design language for a professional look
• Context-aware positioning
• Modal and popover display modes
• Fully typed TypeScript API
• Simple integration with any React application

Installation

npm install react-saas-tooltips
# or
yarn add react-saas-tooltips

Dependencies

This library has the following peer dependencies:

• React 16.8+
• React DOM 16.8+
• Framer Motion 4.0+

Usage

The library exports a single main component EnhancedTooltipManager (default export) and necessary types.

Important: Importing Styles

To ensure tooltips display correctly, you must import the CSS:

// Import the styles in your app's main entry file (e.g., App.jsx, index.js)
import "react-saas-tooltips/styles.css";

Basic Example

import React, { useState, useRef } from "react";
import TooltipManager, { TooltipType } from "react-saas-tooltips";
// Don't forget to import the styles!
import "react-saas-tooltips/styles.css";

function MyComponent() {
  const [isTooltipOpen, setIsTooltipOpen] = useState(false);
  const buttonRef = useRef(null);

  return (
    <div>
      <button ref={buttonRef} onClick={() => setIsTooltipOpen(true)}>
        Show Incognito Tooltip
      </button>

      <TooltipManager
        tooltipType={TooltipType.Incognito}
        open={isTooltipOpen}
        onClose={() => setIsTooltipOpen(false)}
        mode="popover" // 'modal' (default) or 'popover'
        anchorRef={buttonRef} // Required for popover mode
        placement="bottom" // For positioning: 'top', 'bottom', 'left', 'right', etc.
      />
    </div>
  );
}

Available Tooltip Types

Use the TooltipType enum to specify which tooltip to display:

import { TooltipType } from "react-saas-tooltips";

// Examples:
TooltipType.Incognito; // Incognito mode tooltip
TooltipType.AddAttachment; // File attachment options
TooltipType.CustomFieldsV2; // Custom data fields
TooltipType.EditSignature; // Email signature tooltip
// And many more...

Full list of available tooltips:

enum TooltipType {
  Custom = "custom-tooltip",
  EditSignature = "edit-signature",
  AddAttachment = "add-attachment",
  AddButton = "add-button",
  Notes = "notes",
  Tickets = "tickets",
  CustomFieldsV2 = "custom-fields-v2",
  AddTag = "add-tag",
  PollButton = "poll-button-messages",
  HideScheduledMessages = "hide-scheduled-messages",
  ShowFullDate = "show-full-date",
  ShowChannelName = "show-channel-name",
  UnarchiveChat = "unarchive-chat",
  RemoveData = "remove-data",
  GeoLocation = "geo-location",
  AutoTranscribe = "auto-transcribe",
  ChatActionSync = "chat-action-sync",
  ChatHistorySync = "chat-history-sync",
  SearchFunction = "search-function",
  Incognito = "incognito-mode",
}

Display Modes

The TooltipManager supports two display modes:

1. Modal (default): Displays the tooltip centered on screen with a dark overlay background.
2. Popover: Positions the tooltip relative to an anchor element (requires anchorRef prop).

// Modal mode example (centered overlay)
<TooltipManager
  tooltipType={TooltipType.Incognito}
  open={isOpen}
  onClose={handleClose}
  mode="modal" // Default
/>

// Popover mode example (positioned relative to anchor)
<TooltipManager
  tooltipType={TooltipType.Incognito}
  open={isOpen}
  onClose={handleClose}
  mode="popover"
  anchorRef={myButtonRef}
  placement="bottom-start" // Positioning
/>

Tooltip Placement

When using popover mode, you can control the tooltip's position with the placement prop:

// Placement options
placement = "top"; // Above the anchor
placement = "bottom"; // Below the anchor
placement = "left"; // To the left of the anchor
placement = "right"; // To the right of the anchor
placement = "top-start"; // Top-aligned with start of anchor
placement = "bottom-end"; // Bottom-aligned with end of anchor
// etc.

TypeScript Support

The library is fully typed with TypeScript:

import TooltipManager, {
  TooltipType,
  TooltipPosition,
  EnhancedTooltipManagerProps,
} from "react-saas-tooltips";

// EnhancedTooltipManagerProps interface:
interface EnhancedTooltipManagerProps {
  tooltipType?: TooltipType;
  open: boolean;
  onClose: () => void;
  mode?: "modal" | "popover";
  anchorRef?: React.RefObject<HTMLElement>;
  placement?: TooltipPosition;
  tooltipProps?: Record<string, any>;
}

Complete Example

Here's a complete example showing how to properly use the library with the InfoButton utility component:

import React, { useState, useRef } from "react";
import TooltipManager, { TooltipType, InfoButton } from "react-saas-tooltips";
// Don't forget to import the styles!
import "react-saas-tooltips/styles.css";

function MyFeatureWithTooltip() {
  const [isTooltipOpen, setIsTooltipOpen] = useState(false);
  const infoButtonRef = useRef(null);

  return (
    <div className="my-feature">
      <div className="feature-header">
        <h2>Incognito Mode</h2>
        <InfoButton
          ref={infoButtonRef}
          onClick={() => setIsTooltipOpen(true)}
          size="medium"
          variant="default"
        />
      </div>

      <TooltipManager
        tooltipType={TooltipType.Incognito}
        open={isTooltipOpen}
        onClose={() => setIsTooltipOpen(false)}
        mode="popover"
        anchorRef={infoButtonRef}
        placement="right"
      />
    </div>
  );
}

Styling in Apps Without Tailwind

If your app doesn't use Tailwind CSS, don't worry! The library bundles all necessary styles in the styles.css file. Just make sure to import it as shown in the examples, and the tooltips will look consistent with the design.

// Import the styles at the top of your main component file
import "react-saas-tooltips/styles.css";

License

MIT