-
-
Notifications
You must be signed in to change notification settings - Fork 528
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Visibility on tooltip hover, custom JSX inside tooltip #35
Comments
This feature has been supported |
Thx :) |
What about tooltip visibility on hover for solid state? |
@artaommahe or you mean this? |
Yep. It's very usefull for placing links in tooltip, e.x. 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 |
@artaommahe
|
Thanks, now i can rid of second tooltip lib :) |
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 |
@tnrich I haven't seen anything wrong with JS part, but I wonder why you change the css of the class Feel free to ask me if you still have problem. |
I think it's really useful things
This things at least let you to add links inside tooltip that can be clicked
The text was updated successfully, but these errors were encountered: