如何更改 react-popper-tooltip 箭头颜色？

Question

我正在使用 react-popper-tooltip，尝试自定义我的工具提示，但问题是我找不到改变箭头颜色的方法。

在线演示：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>
      )}
    >

我认为我应该在这里添加样式：

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

但是我无法在内联样式中使用::after。有人能展示一下如何自定义工具提示吗？

- jjzjx118_2

Answer 1

您不必使用内联样式。您可以将覆盖添加到CSS文件中。将以下内容添加到style.css中以将箭头颜色更改为红色。

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

- squillman