slmgc / react-hint

Line 161 in 3036690

{ className: className + ' ' + className + '--' + at,

Hi! It would be incredibly helpful if the ability to add more than one custom classname was introduced (perhaps a wrapper class for the outer div).

I am trying to create a tooltip with two different colour settings. I can't find a way for me to do this at the moment. I can have all the styles exactly the way I need, but I can only have one colour version of the tooltip whereas I need two.

Please can you let me know if a small tweak in the code could make this possible? Thanks!

Hi, if you need to have two different tooltip styles, you can create two instances of ReactHint, you can check an example here: https://react-hint.js.org/

These two threads might also help you:
#13
#8

Hi thanks for your comment.

I don't want to use v1 (as suggested in issue #13) because then I'd miss out on features introduced in v2 and v3.

I also don't want to define two instances when I could have a single configurable instance.

Anyway, I found a work-around now for styling the tooltip, even though the CSS does not quite adhere to SASS guidelines and is quite repetitive. If you updated it, I'd need to change all of my CSS.

Hi, can you provide a repro with your use-case?

Resolving as there is a workaround.

if someone uses css modules, you can write your css like this:
p.s. works for me

`
.customHint
position: absolute
z-index: 99
height: 0
width: 290px

&[class*='--right']
    padding-left: 22px

    .hintContent:before
        position: absolute
        right: 100%
        top: 44px
        border: 16px solid transparent
        border-left: none
        border-right: 12px solid #fff
        content: ''

&[class*='--left']
    padding-right: 22px

    .hintContent:before
        position: absolute
        left: 100%
        top: 44px
        border: 16px solid transparent
        border-right: none
        border-left: 12px solid #fff
        content: ''

.hintContent
position: relative
padding: 25px
margin-top: -60px
box-sizing: border-box
text-align: center
background: #fff
box-shadow: 0 15px 35px rgba(0,0,0,.15)
`

Can only use one custom className