specifity with role [role="tooltip"]

[Tomekmularczyk]

I found that I don't need additional div wrapper like in the examples to get enough specifity. Currently this works for me:

import classNames from "classnames";
import { cloneElement, ComponentProps, ReactNode, useId } from "react";
import { Tooltip as ReactTooltip } from "react-tooltip";
import styles from "./Tooltip.module.css";

type ReactTooltipProps = ComponentProps<typeof ReactTooltip>;

type Props = Omit<ReactTooltipProps, "children" | "content"> & {
  className?: string;
  trigger: JSX.Element;
  children: ReactNode;
};

export const Tooltip = ({
  className,
  children,
  trigger,
  ...tooltipProps
}: Props) => {
  const id = useId();
  return (
    <>
      {cloneElement(trigger, { "data-tooltip-id": id })}
      <ReactTooltip
        className={classNames(styles.tooltipWrapper, className)}
        wrapper="span"
        id={id}
        {...tooltipProps}
      >
        {children}
      </ReactTooltip>
    </>
  );
};

.tooltipWrapper[role="tooltip"] { 
  @apply rounded-lgplus bg-tixy-1000 p-2 text-sm font-normal leading-4 text-tixy-10 shadow-sm;
}

[role="tooltip"] is all I need.

[danielbarion]

hey @Tomekmularczyk!

Thanks for the heads-up, actually we have an open issue because of a recent change that we made on how we handle the styles: #1025

do you have any thoughts about the discussion happening on the issue?