How to change the arrow color of react-popper-tooltip?

user_11839297 0
Viewed 2201

I am using react-popper-tooltip , and I tried to custom my own tooltips, the problem is I can't find a way to change the color of the arrow.

online demo:https://stackblitz.com/edit/react-qjma64

  <TooltipTrigger
      {...props}
      tooltip={({
        arrowRef,
        tooltipRef,
        getArrowProps,
        getTooltipProps,
        placement
      }) => (
        <div
          {...getTooltipProps({
            ref: tooltipRef,
            className: "tooltip-container"
          })}
        >
          <div
            {...getArrowProps({
              ref: arrowRef,
              className: "tooltip-arrow",
              "data-placement": placement
            })}
          />
          }{tooltip}
        </div>
      )}
    >

I think I should add the style here:

{...getArrowProps({
              ref: arrowRef,
              className: "tooltip-arrow",
              "data-placement": placement
            })}

but I can't use ::after with an inline style. can any one show me how to custom the tooltip?

reactjs
1 Answers

You don't have to use inline styles. You can add overrides to your CSS file. Add this to style.css to change the arrow color to red.

.tooltip-arrow[data-placement*='bottom']::after {
  border-color: transparent transparent red transparent !important;
}
user_758520
Related