Is there any way to increase the size of the arrow in React Tooltip?

Question

I have gone through the official documentation, and haven't found how to increase the react tooltip arrow size.

<span className="icon margin-10-right txtSize20 txtBlue icon_profile-menu icon-tool" 
data-tip={`<p>HTML</p>`}
data-for={data._id} data-place="right" data-effect="solid" data-type="light" data-text-color="black" data-html={true} data-class="tooltip2">
</span> 
<ReactTooltip className="custom-tool" html={true} multiline={false}  scrollHide={false} id={data._id}/>

Kindly help me with this.

Refer to this https://stackoverflow.com/questions/52104196/change-bootstrap-3-arrow-tooltip-width — GWG Panzer, Aug 01 '22 at 11:52
I am using custom classes and the React-Tooltip library, not bootstrap. That wont work. — Joshua Niteesh, Aug 01 '22 at 11:59

score 0 · Answer 1 · answered Aug 20 '22 at 16:36

The library doesn't support that. However, you can do the following workaround:

add uuid = "uuid-for-tooltip-arrow" as a property for ReactTooltip. For example:

...
<ReactTooltip uuid = "uuid-for-tooltip-arrow" className="custom-tool" .../>

add the following CSS code:

.uuid-for-tooltip-arrow.place-top::after {
  bottom: -<new-height>px !important;
  border-top-width: <new-height>px !important;
}

where <new-height> is a number representing the new height in pixels. E.g. if you want to double the height, it's going to be 12, resulting in

.uuid-for-tooltip-arrow.place-top::after {
  bottom: -12px !important;
  border-top-width: 12px !important;
}

Also note that you have to change place-top to the appropriate direction if the tooltip is not on the top. So if you set place = "left", then you have to add the following CSS:

.uuid-for-tooltip-arrow.place-left::after {
  bottom: -12px !important;
  border-top-width: 12px !important;
}

Is there any way to increase the size of the arrow in React Tooltip?

1 Answers1