Visibility on tooltip hover, custom JSX inside tooltip

[artaommahe]

I think it's really useful things

• prevent tooltip hide on tooltip hover(mb option?)
• allow JSX objects for tooltip content

This things at least let you to add links inside tooltip that can be clicked

[wwayne]

allow JSX objects for tooltip content

This feature has been supported
Example: http://wwayne.github.io/react-tooltip/
HISTORY.MD: https://github.com/wwayne/react-tooltip/blob/master/HISTORY.md

[artaommahe]

Thx :)

[artaommahe]

What about tooltip visibility on hover for solid state?

[wwayne]

@artaommahe
Sorry I didn't get you, can you explain more details to me?

or you mean this? prevent tooltip hide on tooltip hover

[artaommahe]

Yep. It's very usefull for placing links in tooltip, e.x.

Some description ... read more

now i can't do this cause tooltips hides on parent element hover lost, and it's forced me to use another tooltip lib just for this case

[wwayne]

@artaommahe
Done, you can combine using the feature class and delayHide of react-tooltip to achieve this:

<a data-tip="tooltip" data-class="extra" data-delay-hide="500"></a>
<ReactTooltip />

.extra {
 &:hover {
   visibility: visible !important;
   opacity: 1 !important;
 }
}

[artaommahe]

Thanks, now i can rid of second tooltip lib :)

[tnrich]

Hey there @wwayne , I'm having trouble getting this to work, but I'm not quite sure why..It doesn't seem as if the hover state is being activated when I hover over the tooltip element. If I manually activate the hover state in the chrome console, the tooltip will remain popped up.

Here's some code snippets of what I'm trying to do:

.extra {
    &:hover {
        visibility: visible !important;
        opacity: 1 !important;
    }
}

.__react_component_tooltip {
    top: 0px !important;
    left: 0px !important;



    background: none !important;
    color: black !important;
    &:after{
        border-top: none !important;
    }
    span {
        background: white;
    }
}

<foreignObject x={x3} y={y3}>
          <div className='labelTooltip' style={{position: 'relative'}}>
            <ReactTooltip effect='solid' delayHide={100} offset={{top: 0, left: 0}} id={'tooltip' + key}>
              <div>
                {labels.map(function(label){
                  return <div>
                    <span>
                      {label.text}
                    </span>
                  </div>
                })}
              </div>
            </ReactTooltip>
          </div>
        </foreignObject>


<text
        data-tip
        data-class="extra"
        // data-delay-hide="500"
        data-for={'tooltip' + key}
        key={'text' + key}
        className='dragMe clickable'
        x={x3}
        y={y3}
        style={ {textAnchor: x3 > 0 ? "start" : "end", fontSize: '12px'} }>
        {text + (multipleLabels ? '...' : '')}
      </text>

Thanks for the help!

Thomas

[wwayne]

@tnrich I haven't seen anything wrong with JS part, but I wonder why you change the css of the class __react_component_tooltip? I doubt top: 0px !important; left: 0px !important; makes the tooltip become abnormal.
PS: you can omit offset={{top: 0, left: 0}}

Feel free to ask me if you still have problem.

[mklimkin0190]

In case anybody has the same problem as @tnrich did, with hover not triggering, add pointer-events: auto !important; to the .extra css class. Found here: #227