Search code examples
javascriptreactjsnpmweb-applicationsreact-tooltip

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


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.


Solution

  • 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