type TooltipsProps = {
  className?: string;
  children?: React.ReactNode | null;
  darkTheme?: boolean;
  pointing?: "right up" | "left down" | "right down" | "left up" | "Center down" | "Center up";
};

export default function Tooltips({ className, children = null, darkTheme = true, pointing = "left down" }: TooltipsProps) {
  const isDarkThemeAndCenterUp = darkTheme && pointing === "Center up";
  const isDarkThemeAndIsCenterDownOrRightDown = darkTheme && ["Center down", "right down"].includes(pointing);
  const isDarkThemeAndLeftDown = darkTheme && pointing === "left down";
  const isDarkThemeAndLeftUp = darkTheme && pointing === "left up";
  const isDarkThemeAndRightDown = darkTheme && pointing === "right down";
  const isDarkThemeAndRightUp = darkTheme && pointing === "right up";
  const isNotDarkThemeAndIsCenterDownOrRightDown = !darkTheme && ["Center down", "right down"].includes(pointing);
  const isNotDarkThemeAndIsCenterUpOrRightUp = !darkTheme && ["Center up", "right up"].includes(pointing);
  const isNotDarkThemeAndLeftDown = !darkTheme && pointing === "left down";
  const isNotDarkThemeAndLeftUp = !darkTheme && pointing === "left up";
  const isNotDarkThemeAndRightDown = !darkTheme && pointing === "right down";
  const isNotDarkThemeAndRightUp = !darkTheme && pointing === "right up";
  return (
    <div className={className || `drop-shadow-[0px_6px_8px_rgba(0,0,0,0.08),0px_9px_14px_rgba(0,0,0,0.05),0px_12px_24px_rgba(0,0,0,0.03)] relative ${["left up", "Center up", "right up"].includes(pointing) ? "h-[30.485px] w-[81px]" : "content-stretch flex flex-col items-start max-w-[320px]"}`} id={isNotDarkThemeAndRightUp ? "node-2514_63803" : isDarkThemeAndRightUp ? "node-1669_27987" : !darkTheme && pointing === "Center up" ? "node-1669_28020" : isDarkThemeAndCenterUp ? "node-2514_63807" : isNotDarkThemeAndLeftUp ? "node-1669_28016" : isDarkThemeAndLeftUp ? "node-1408_17139" : isNotDarkThemeAndRightDown ? "node-1669_28024" : isDarkThemeAndRightDown ? "node-1408_17137" : !darkTheme && pointing === "Center down" ? "node-2514_63798" : darkTheme && pointing === "Center down" ? "node-2514_63789" : isNotDarkThemeAndLeftDown ? "node-1669_28011" : "node-1408_17135"}>
      {isDarkThemeAndIsCenterDownOrRightDown && (
        <>
          <div className="bg-[var(--ux\/grey\/grey-10-\#353535,#353535)] border border-[var(--ux\/grey\/grey-8-\#595959,#595959)] border-solid content-stretch flex items-start justify-end max-w-[320px] mb-[-6px] px-[8px] py-[4px] relative rounded-[2px] shrink-0" data-node-id="2514:63790" data-name="Content">
            {children || (
              <p className="flex-[1_0_0] font-['Roboto:Regular',sans-serif] font-normal leading-[16px] min-w-px relative text-[12px] text-[color:var(--ux\/grey\/grey-2-\#f8f8f8,#f8f8f8)]" data-node-id="2514:63791" style={{ fontVariationSettings: "'wdth' 100" }}>
                Description
              </p>
            )}
          </div>
          <div className="h-[8.485px] relative shrink-0 w-full" id={isDarkThemeAndRightDown ? "node-1669_25940" : "node-2514_63792"}>
            <div className={`absolute bottom-[-1.46px] flex items-center justify-center size-[8.485px] ${isDarkThemeAndRightDown ? "right-[11.68px]" : "-translate-x-1/2 left-[calc(50%-0.5px)]"}`}>
              <div className="-rotate-135 flex-none">
                <div className="bg-[var(--ux\/grey\/grey-10-\#353535,#353535)] border-[var(--ux\/grey\/grey-8-\#595959,#595959)] border-l border-solid border-t relative size-[6px]" id={isDarkThemeAndRightDown ? "node-1669_25941" : "node-2514_63793"} />
              </div>
            </div>
          </div>
        </>
      )}
      {isNotDarkThemeAndIsCenterDownOrRightDown && (
        <>
          <div className="bg-[var(--ux\/grey\/grey-1-\#ffffff,white)] border border-[var(--ux\/grey\/grey-3-\#f0f0f0,#f0f0f0)] border-solid content-stretch flex items-start justify-end max-w-[320px] mb-[-6px] px-[8px] py-[4px] relative rounded-[2px] shrink-0" data-node-id="2514:63799" data-name="Content">
            {children || (
              <p className="flex-[1_0_0] font-['Roboto:Regular',sans-serif] font-normal leading-[16px] min-w-px relative text-[12px] text-[color:var(--ux\/grey\/grey-13-\#141414,#141414)]" data-node-id="2514:63800" style={{ fontVariationSettings: "'wdth' 100" }}>
                Description
              </p>
            )}
          </div>
          <div className="h-[8.485px] relative shrink-0 w-full" id={isNotDarkThemeAndRightDown ? "node-1669_28027" : "node-2514_63801"}>
            <div className={`absolute bottom-[-1.46px] flex items-center justify-center size-[8.485px] ${isNotDarkThemeAndRightDown ? "right-[11.68px]" : "-translate-x-1/2 left-[calc(50%-0.5px)]"}`}>
              <div className="-rotate-135 flex-none">
                <div className="bg-[var(--ux\/grey\/grey-1-\#ffffff,white)] border-[var(--ux\/grey\/grey-3-\#f0f0f0,#f0f0f0)] border-l border-solid border-t relative size-[6px]" id={isNotDarkThemeAndRightDown ? "node-1669_28028" : "node-2514_63802"} />
              </div>
            </div>
          </div>
        </>
      )}
      {isNotDarkThemeAndIsCenterUpOrRightUp && (
        <>
          <div className="absolute bg-[var(--ux\/grey\/grey-1-\#ffffff,white)] border border-[var(--ux\/grey\/grey-3-\#f0f0f0,#f0f0f0)] border-solid content-stretch flex items-start justify-end max-w-[320px] px-[8px] py-[4px] right-0 rounded-[4px] top-[4.49px]" data-node-id="1669:28021" data-name="Content">
            {children || (
              <p className="flex-[1_0_0] font-['Roboto:Regular',sans-serif] font-normal leading-[16px] min-w-px relative text-[12px] text-[color:var(--ux\/grey\/grey-13-\#141414,#141414)]" data-node-id="1669:28022" style={{ fontVariationSettings: "'wdth' 100" }}>
                Description
              </p>
            )}
          </div>
          <div className={`absolute flex items-center justify-center size-[8.485px] top-[0.53px] ${isNotDarkThemeAndRightUp ? "right-[11.69px]" : "-translate-x-1/2 left-[calc(50%-0.5px)]"}`}>
            <div className="flex-none rotate-45">
              <div className="bg-[var(--ux\/grey\/grey-1-\#ffffff,white)] border-[var(--ux\/grey\/grey-3-\#f0f0f0,#f0f0f0)] border-l border-solid border-t relative size-[6px]" id={isNotDarkThemeAndRightUp ? "node-2514_63806" : "node-1669_28023"} />
            </div>
          </div>
        </>
      )}
      {isDarkThemeAndLeftDown && (
        <>
          <div className="bg-[var(--ux\/grey\/grey-10-\#353535,#353535)] border border-[var(--ux\/grey\/grey-8-\#595959,#595959)] border-solid content-stretch flex items-start max-w-[320px] mb-[-6px] px-[8px] py-[4px] relative rounded-[4px] shrink-0" data-node-id="1408:17039" data-name="Content">
            {children || (
              <p className="flex-[1_0_0] font-['Roboto:Regular',sans-serif] font-normal leading-[16px] min-w-px relative text-[12px] text-[color:var(--ux\/grey\/grey-2-\#f8f8f8,#f8f8f8)]" data-node-id="1408:17040" style={{ fontVariationSettings: "'wdth' 100" }}>
                Description
              </p>
            )}
          </div>
          <div className="h-[8.485px] relative shrink-0 w-full" data-node-id="1669:25910">
            <div className="absolute bottom-[-1.46px] flex items-center justify-center left-[11.76px] size-[8.485px]">
              <div className="-rotate-135 flex-none">
                <div className="bg-[var(--ux\/grey\/grey-10-\#353535,#353535)] border-[var(--ux\/grey\/grey-8-\#595959,#595959)] border-l border-solid border-t relative size-[6px]" data-node-id="1669:25831" />
              </div>
            </div>
          </div>
        </>
      )}
      {isNotDarkThemeAndLeftDown && (
        <>
          <div className="bg-[var(--ux\/grey\/grey-1-\#ffffff,white)] border border-[var(--ux\/grey\/grey-3-\#f0f0f0,#f0f0f0)] border-solid content-stretch flex items-start max-w-[320px] mb-[-6px] px-[8px] py-[4px] relative rounded-[4px] shrink-0" data-node-id="1669:28012" data-name="Content">
            {children || (
              <p className="flex-[1_0_0] font-['Roboto:Regular',sans-serif] font-normal leading-[16px] min-w-px relative text-[12px] text-[color:var(--ux\/grey\/grey-13-\#141414,#141414)]" data-node-id="1669:28013" style={{ fontVariationSettings: "'wdth' 100" }}>
                Description
              </p>
            )}
          </div>
          <div className="h-[8.485px] relative shrink-0 w-full" data-node-id="1669:28014">
            <div className="absolute bottom-[-1.46px] flex items-center justify-center left-[11.76px] size-[8.485px]">
              <div className="-rotate-135 flex-none">
                <div className="bg-[var(--ux\/grey\/grey-1-\#ffffff,white)] border-[var(--ux\/grey\/grey-3-\#f0f0f0,#f0f0f0)] border-l border-solid border-t relative size-[6px]" data-node-id="1669:28015" />
              </div>
            </div>
          </div>
        </>
      )}
      {isDarkThemeAndLeftUp && (
        <>
          <div className="absolute bg-[var(--ux\/grey\/grey-10-\#353535,#353535)] border border-[var(--ux\/grey\/grey-8-\#595959,#595959)] border-solid content-stretch flex items-start left-0 max-w-[320px] px-[8px] py-[4px] rounded-[4px] top-[4.49px]" data-node-id="1408:17114" data-name="Content">
            {children || (
              <p className="flex-[1_0_0] font-['Roboto:Regular',sans-serif] font-normal leading-[16px] min-w-px relative text-[12px] text-[color:var(--ux\/grey\/grey-2-\#f8f8f8,#f8f8f8)]" data-node-id="1408:17115" style={{ fontVariationSettings: "'wdth' 100" }}>
                Description
              </p>
            )}
          </div>
          <div className="absolute flex items-center justify-center left-[11.76px] size-[8.485px] top-[0.53px]">
            <div className="flex-none rotate-45">
              <div className="bg-[var(--ux\/grey\/grey-10-\#353535,#353535)] border-[var(--ux\/grey\/grey-8-\#595959,#595959)] border-l border-solid border-t relative size-[6px]" data-node-id="1669:26676" />
            </div>
          </div>
        </>
      )}
      {isNotDarkThemeAndLeftUp && (
        <>
          <div className="absolute bg-[var(--ux\/grey\/grey-1-\#ffffff,white)] border border-[var(--ux\/grey\/grey-3-\#f0f0f0,#f0f0f0)] border-solid content-stretch flex items-start left-0 max-w-[320px] px-[8px] py-[4px] rounded-[4px] top-[4.49px]" data-node-id="1669:28017" data-name="Content">
            {children || (
              <p className="flex-[1_0_0] font-['Roboto:Regular',sans-serif] font-normal leading-[16px] min-w-px relative text-[12px] text-[color:var(--ux\/grey\/grey-13-\#141414,#141414)]" data-node-id="1669:28018" style={{ fontVariationSettings: "'wdth' 100" }}>
                Description
              </p>
            )}
          </div>
          <div className="absolute flex items-center justify-center left-[11.76px] size-[8.485px] top-[0.53px]">
            <div className="flex-none rotate-45">
              <div className="bg-[var(--ux\/grey\/grey-1-\#ffffff,white)] border-[var(--ux\/grey\/grey-3-\#f0f0f0,#f0f0f0)] border-l border-solid border-t relative size-[6px]" data-node-id="1669:28019" />
            </div>
          </div>
        </>
      )}
      {isDarkThemeAndCenterUp && (
        <>
          <div className="absolute bg-[var(--ux\/grey\/grey-10-\#353535,#353535)] border border-[var(--ux\/grey\/grey-8-\#595959,#595959)] border-solid content-stretch flex items-start justify-center max-w-[320px] px-[8px] py-[4px] right-0 rounded-[4px] top-[4.06px]" data-node-id="2514:63808" data-name="Content">
            {children || (
              <p className="flex-[1_0_0] font-['Roboto:Regular',sans-serif] font-normal leading-[16px] min-w-px relative text-[12px] text-[color:var(--ux\/grey\/grey-2-\#f8f8f8,#f8f8f8)] text-center" data-node-id="2514:63809" style={{ fontVariationSettings: "'wdth' 100" }}>
                Description
              </p>
            )}
          </div>
          <div className="-translate-x-1/2 absolute flex items-center justify-center left-[calc(50%-0.5px)] size-[8.485px] top-[0.53px]">
            <div className="flex-none rotate-45">
              <div className="bg-[var(--ux\/grey\/grey-10-\#353535,#353535)] border-[var(--ux\/grey\/grey-8-\#595959,#595959)] border-l border-solid border-t relative size-[6px]" data-node-id="2514:63810" />
            </div>
          </div>
        </>
      )}
      {isDarkThemeAndRightUp && (
        <>
          <div className="absolute bg-[var(--ux\/grey\/grey-10-\#353535,#353535)] border border-[var(--ux\/grey\/grey-8-\#595959,#595959)] border-solid content-stretch flex items-start justify-end max-w-[320px] px-[8px] py-[4px] right-0 rounded-[4px] top-[4.49px]" data-node-id="1669:27988" data-name="Content">
            {children || (
              <p className="flex-[1_0_0] font-['Roboto:Regular',sans-serif] font-normal leading-[16px] min-w-px relative text-[12px] text-[color:var(--ux\/grey\/grey-2-\#f8f8f8,#f8f8f8)]" data-node-id="1669:27989" style={{ fontVariationSettings: "'wdth' 100" }}>
                Description
              </p>
            )}
          </div>
          <div className="absolute flex items-center justify-center right-[11.69px] size-[8.485px] top-[0.53px]">
            <div className="flex-none rotate-45">
              <div className="bg-[var(--ux\/grey\/grey-10-\#353535,#353535)] border-[var(--ux\/grey\/grey-8-\#595959,#595959)] border-l border-solid border-t relative size-[6px]" data-node-id="1669:27990" />
            </div>
          </div>
        </>
      )}
    </div>
  );
}SUPER CRITICAL: The generated React+Tailwind code MUST be converted to match the target project's technology stack and styling system.
1. Analyze the target codebase to identify: technology stack, styling approach, component patterns, and design tokens
2. Convert React syntax to the target framework/library
3. Transform all Tailwind classes to the target styling system while preserving exact visual design
4. Follow the project's existing patterns and conventions
DO NOT install any Tailwind as a dependency unless the user instructs you to do so.
Node ids have been added to the code as data attributes, e.g. `data-node-id="1:2"`.These styles are contained in the design: Roboto/12 tips: Font(family: "Roboto", style: Regular, size: 12, weight: 400, lineHeight: 16, letterSpacing: 0), L3 shadow: Effect(type: DROP_SHADOW, color: #00000008, offset: (0, 12), radius: 48, spread: 16); Effect(type: DROP_SHADOW, color: #0000000D, offset: (0, 9), radius: 28, spread: 0); Effect(type: DROP_SHADOW, color: #00000014, offset: (0, 6), radius: 16, spread: -8).Images and SVGs will be stored as constants, e.g. const image = 'https://www.figma.com/api/mcp/asset/550e8400-e29b-41d4-a716-446655440000'. These constants will be used in the code as the source for the image, ex: <img src={image} />. Image assets are stored on a remote server for 7 days and can be fetched using the provided URLs until they expire.