Is there any props to change text style(i.e. bold to unbold) in React tooltip?

1.5k Views Asked by At

Can anyone please explain to me how can we make bold text to unbold in react-tooltip. I have used npm react-tooltip

note: default text is bold I want normal text.

2

There are 2 best solutions below

0
On BEST ANSWER

You can customize the text style via the API of ReactTooltip

<ReactTooltip textColor={"lightblue"} backgroundColor={"white"} />

Or simply use !important

.Tooltip {
  color: red !important;
}
<ReactTooltip className="Tooltip" />

Which is been suggested in its document demo:

.extraClass {
  font-size: 20px !important;
  pointer-events: auto !important;
}
.extraClass:hover {
  visibility: visible !important;
  opacity: 1 !important;
}

Edit react-tooltip-example-3.11.6

1
On

You can apply the font-weight: normal as mentioned using the data attribute used by react-tooltip.

a[data-tip] {
  font-weight: normal;
}