Styling and Utilities

/**
 * Remove injected tooltip styles (deprecated)
 * Use disableStyleInjection tooltip prop instead
 * @param options - Style removal configuration
 */
function removeStyle(options?: {
  type?: 'core' | 'base';
  id?: string;
}): void;

import { removeStyle } from "react-tooltip";

// Remove base styles
removeStyle({ type: 'base' });

// Remove core styles  
removeStyle({ type: 'core' });

// Remove styles with custom ID
removeStyle({ type: 'base', id: 'custom-tooltip-styles' });

// Manual CSS import (required for versions < 5.13.0)
import 'react-tooltip/dist/react-tooltip.css';

// Tooltip component prop for controlling style injection
interface ITooltipController {
  /** 
   * Disable CSS injection
   * - true: Disable both core and base styles
   * - false: Enable automatic injection (default)
   * - 'core': Disable only core styles, keep base styles
   */
  disableStyleInjection?: boolean | 'core';
}

import { Tooltip } from "react-tooltip";

// Disable all automatic style injection
<Tooltip 
  id="no-styles" 
  disableStyleInjection={true}
/>

// Disable only core styles, keep base styles
<Tooltip 
  id="no-core-styles" 
  disableStyleInjection="core"
/>

// Default behavior - automatic injection
<Tooltip id="auto-styles" />

# Disable core styles globally
REACT_TOOLTIP_DISABLE_CORE_STYLES=true

# Disable base styles globally  
REACT_TOOLTIP_DISABLE_BASE_STYLES=true

interface ITooltipController {
  /** Inline CSS styles for the tooltip */
  style?: CSSProperties;
  /** Border styling (width > 3px may affect arrow positioning) */
  border?: CSSProperties['border'];
  /** Tooltip opacity */
  opacity?: CSSProperties['opacity'];
  /** Arrow background color */
  arrowColor?: CSSProperties['backgroundColor'];
  /** Arrow size in pixels */
  arrowSize?: number;
}

import { Tooltip } from "react-tooltip";

// Custom inline styles
<Tooltip 
  id="styled-tooltip"
  style={{
    backgroundColor: '#333',
    color: '#fff',
    fontSize: '14px',
    padding: '8px 12px',
    borderRadius: '4px'
  }}
  border="2px solid #555"
  opacity={0.95}
  arrowColor="#333"
  arrowSize={8}
/>

interface ITooltipController {
  /** CSS class name for the tooltip container */
  className?: string;
  /** CSS class name for the tooltip arrow */
  classNameArrow?: string;
}

// Custom CSS classes
<Tooltip 
  id="custom-classes"
  className="my-custom-tooltip"
  classNameArrow="my-custom-arrow"
/>

// Via data attributes
<button
  data-tooltip-id="data-classes"
  data-tooltip-content="Styled tooltip"
  data-tooltip-class-name="my-data-tooltip"
>
  Styled button
</button>

/* Custom CSS styles */
.my-custom-tooltip {
  background: linear-gradient(45deg, #ff6b6b, #ee5a24);
  color: white;
  font-weight: bold;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.my-custom-arrow {
  color: #ff6b6b;
}

.my-data-tooltip {
  border: 2px dashed #333;
  background: #f0f0f0;
  color: #333;
}

type VariantType = 'dark' | 'light' | 'success' | 'warning' | 'error' | 'info';

// Different visual variants
<Tooltip id="dark-tooltip" variant="dark" />
<Tooltip id="success-tooltip" variant="success" />
<Tooltip id="warning-tooltip" variant="warning" />
<Tooltip id="error-tooltip" variant="error" />
<Tooltip id="info-tooltip" variant="info" />
<Tooltip id="light-tooltip" variant="light" />

{
  "exports": {
    "./dist/react-tooltip.css": "./dist/react-tooltip.min.css"
  }
}

// Internal constants (not exported from main package)
const REACT_TOOLTIP_CORE_STYLES_ID = 'react-tooltip-core-styles';
const REACT_TOOLTIP_BASE_STYLES_ID = 'react-tooltip-base-styles';

/**
 * Internal style injection function (not exported from main package)
 * Used internally for CSS injection. For custom styling needs, use the
 * disableStyleInjection prop and provide your own CSS instead.
 */
function injectStyle(options: {
  css: string;
  id?: string;
  type?: 'core' | 'base';
  ref?: any;
}): void;

window.addEventListener('react-tooltip-inject-styles', (event) => {
  // Custom event payload
  const { disableCore, disableBase } = event.detail;
  // Handle custom style injection logic
});

import { removeStyle } from "react-tooltip";

// Remove styles programmatically
useEffect(() => {
  removeStyle({ type: 'base' });
}, []);

import { Tooltip } from "react-tooltip";

// Disable injection via component prop
<Tooltip 
  id="no-injection"
  disableStyleInjection={true}
/>

function ConditionalTooltip({ theme }: { theme: 'light' | 'dark' }) {
  return (
    <Tooltip
      id="conditional"
      variant={theme}
      style={{
        ...(theme === 'dark' && { 
          backgroundColor: '#1a1a1a',
          border: '1px solid #333'
        }),
        ...(theme === 'light' && {
          backgroundColor: '#ffffff',
          border: '1px solid #ccc',
          color: '#333'
        })
      }}
    />
  );
}

function ResponsiveTooltip() {
  const [isMobile, setIsMobile] = useState(false);
  
  useEffect(() => {
    const checkMobile = () => setIsMobile(window.innerWidth < 768);
    checkMobile();
    window.addEventListener('resize', checkMobile);
    return () => window.removeEventListener('resize', checkMobile);
  }, []);
  
  return (
    <Tooltip
      id="responsive"
      style={{
        fontSize: isMobile ? '12px' : '14px',
        padding: isMobile ? '6px 8px' : '8px 12px'
      }}
      arrowSize={isMobile ? 6 : 8}
    />
  );
}