How to add extra class for tooltip?

[ZhangChen199102]

Like if I want to change the background color of tooltip, what should I do?

[slmgc]

Hi! There are a few options here:

1. In case you want to introduce slight style changes to the tooltip, you can import the default css and, after that, import your custom css with overridden rules for .react-hint:

import 'react-hint/css/index.css'
import './overridden-rules.css'

...

<ReactHint />

2. If you want to completely change the look of tooltips, you can change the default class name of tooltips. This will require introducing new css rules for .custom-hint, you can base them on the default styles from react-hint/css/index.css:

import './custom-hint.css'

...

<ReactHint className="custom-hint" />

3. In case you want to introduce new tooltips and use them together with old ones, you can define two ReactHint instances, one of them will be with a custom class. This will require using a custom data-attribute for custom tooltips to distinguish between them:

import 'react-hint/css/index.css'
import './custom-hint.css'

...

<ReactHint />
<ReactHint attribute="data-custom" className="custom-hint" />
<button data-rh="tooltip" />
<button data-custom="custom tooltip" />

4. If you want your tooltips to have the default class and a modifier class, you can define a modifier first and then the default class:

import 'react-hint/css/index.css'
import './modifier-rules.css'

...

<ReactHint className="modifier react-hint" />

5. In case previous options don't work for you and you want to add a modifier to a single tooltip, you can install react-hint v1: npm i react-hint@1. It supports a class modifier attribute data-rh-cls:

<ReactHint />
<button data-rh="tooltip" data-rh-cls="modifier" />

Hope it helps!