React-tooltip: Is there a way to hide the arrow of the tooltip?

[dmc1985]

I looked at the html and I did not see a class that was explictly linked to the arrow. Is there a CSS rule that I can add to remove the arrow of the tooltip?

[dmc1985]

I was able to remove the arrow by adding the following css rules:

<css class added with className prop>.__react_component_tooltip.place-left::after {
    border-left: 0 solid <color of rest of border> !important;
}

<css class added with className prop>.__react_component_tooltip.place-right::after {
    border-right: 0 solid <color of rest of border> !important;
}

<css class added with className prop>.__react_component_tooltip.place-top::after {
    border-top: 0 solid <color of rest of border> !important;
}

<css class added with className prop>.__react_component_tooltip.place-bottom::after {
    border-bottom: 0 solid <color of rest of border> !important;
}

[conradks]

I'm not sure when it was added, but I used the property arrowColor and set it to transparent. That seemed to do it for me.

[kanke]

I'm not sure when it was added, but I used the property arrowColor and set it to transparent. That seemed to do it for me.

Please do you have a code snippet for this?

[conradks]

I'm not sure when it was added, but I used the property arrowColor and set it to transparent. That seemed to do it for me.

Please do you have a code snippet for this?

<ReactTooltip arrowColor="transparent"> Your tool tip stuff here. </ReactTooltip>

[DeLm0re]

I'm not sure when it was added, but I used the property arrowColor and set it to transparent. That seemed to do it for me.

Please do you have a code snippet for this?

<ReactTooltip arrowColor="transparent"> Your tool tip stuff here. </ReactTooltip>

However, this will make an arrow filled with the color of the borders. Seems impossible to hide it in a casual way if you are using borderColor prop

[ridak]

This seems to have worked for me (though I haven't tested this exhaustively yet). It's similar to dmc1985's approach though I was able to get away with just one rule that works for all the different placements.

<css class added with className prop>::before {
  border: 0 !important;
}