Tooltip Content Generator

<!-- Tooltip Container -->
<div class="tooltip-wrapper">
  <button class="tooltip-trigger">Hover me</button>
  <div class="tooltip tooltip--top">
    <div class="tooltip__arrow"></div>
    <div class="tooltip__content">
      <h4 class="tooltip__title">Pro Tip</h4>
      <p class="tooltip__text">Click here to learn more about this feature and how it can help you.</p>
    </div>
  </div>
</div>

.tooltip-wrapper {
  position: relative;
  display: inline-block;
}

.tooltip-trigger {
  padding: 8px 16px;
  background: #6366f1;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

.tooltip {
  position: absolute;
  z-index: 1000;
  max-width: 280px;
  padding: 12px;
  background: #1e293b;
  border-radius: 8px;
  font-size: 14px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  pointer-events: none;
}

.tooltip--top {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
}

.tooltip--bottom {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px;
}

.tooltip--left {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 8px;
}

.tooltip--right {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 8px;
}

.tooltip-wrapper:hover .tooltip {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  /* Fade animation */
}

.tooltip__arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}

.tooltip--top .tooltip__arrow {
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 8px 8px 0 8px;
  border-color: #1e293b transparent transparent transparent;
}

.tooltip--bottom .tooltip__arrow {
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 8px 8px 8px;
  border-color: transparent transparent #1e293b transparent;
}

.tooltip--left .tooltip__arrow {
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 8px 0 8px 8px;
  border-color: transparent transparent transparent #1e293b;
}

.tooltip--right .tooltip__arrow {
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 8px 8px 8px 0;
  border-color: transparent #1e293b transparent transparent;
}

.tooltip__title {
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.tooltip__text {
  color: #f1f5f9;
  line-height: 1.5;
  margin: 0;
}

// No JavaScript needed for hover trigger.
// CSS handles the show/hide behavior.

import { useState } from 'react';

const Tooltip = ({
  children,
  title = "Pro Tip",
  content = "Click here to learn more about this feature and how it can help you.",
  position = "top",
  trigger = "hover",
}) => {
  const [isVisible, setIsVisible] = useState(false);

  const tooltipStyle = {
    position: 'absolute',
    zIndex: 1000,
    maxWidth: 280,
    padding: 12,
    background: '#1e293b',
    borderRadius: 8,
    fontSize: 14,
    boxShadow: '0 10px 40px rgba(0, 0, 0, 0.2)',
    opacity: isVisible ? 1 : 0,
    visibility: isVisible ? 'visible' : 'hidden',
    transition: 'all 0.2s ease',
    pointerEvents: isVisible ? 'auto' : 'none',
  };

  const positionStyles = {
    top: { bottom: '100%', left: '50%', transform: 'translateX(-50%)', marginBottom: 8 },
    bottom: { top: '100%', left: '50%', transform: 'translateX(-50%)', marginTop: 8 },
    left: { right: '100%', top: '50%', transform: 'translateY(-50%)', marginRight: 8 },
    right: { left: '100%', top: '50%', transform: 'translateY(-50%)', marginLeft: 8 },
  };

  const handleMouseEnter = () => setIsVisible(true);
  const handleMouseLeave = () => setIsVisible(false);

  return (
    <div
      style={{ position: 'relative', display: 'inline-block' }}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      {children}
      <div style={{ ...tooltipStyle, ...positionStyles[position] }}>
        <h4 style={{ color: '#ffffff', fontSize: 16, fontWeight: 600, margin: '0 0 8px 0' }}>
          {title}
        </h4>
        <p style={{ color: '#f1f5f9', lineHeight: 1.5, margin: 0 }}>{content}</p>
      </div>
    </div>
  );
};

export default Tooltip;

// Usage:
// <Tooltip content="This is a helpful tip">
//   <button>Hover me</button>
// </Tooltip>