Comments (10)
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
from react-tooltip.
Thx :)
from react-tooltip.
What about tooltip visibility on hover for solid state?
from react-tooltip.
@artaommahe
Sorry I didn't get you, can you explain more details to me?
or you mean this? prevent tooltip hide on tooltip hover
from react-tooltip.
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
from react-tooltip.
@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;
}
}
from react-tooltip.
Thanks, now i can rid of second tooltip lib :)
from react-tooltip.
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
from react-tooltip.
@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.
from react-tooltip.
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
from react-tooltip.
Related Issues (20)
- [BUG] Wide tooltips can overflow the window boundaries in version 5 HOT 7
- [BUG] Click events not working as expected HOT 6
- Bundle bloated to 14kb gzip HOT 4
- [BUG] When using default rt-transition-show-delay, tooltip stays in DOM after visibly closing HOT 13
- [BUG] Infinite rerender loop when tooltip is open for an anchor that is inside a scrolled overflow HOT 2
- [BUG] "mousemove" is not working on drag but "pointermove" event will work HOT 9
- [BUG] Strings are not escaped properly HOT 2
- [BUG] when i zoom out or in the big screen resolutions the tooltip is not in right place HOT 3
- Can't import the named export 'arrow' from non EcmaScript module (only default export is available) HOT 7
- [BUG] openEvents does not work with "click" HOT 4
- Is is possible to export default middlewares? HOT 1
- [BUG] Testing react-tooltip with modal result to a failed HOT 1
- [BUG] Tooltip shows briefly when using delayShow and moving to directly adjacent element HOT 3
- [FEAT REQ] Render tooltips inside portal HOT 4
- [BUG] CSP breaks, styles are injected even after disableStyleInjection is used HOT 2
- The component doesn't show the tooltip when there is a single quote " ' " in the data-tooltip-id and the id passed on the Tooltip component. HOT 2
- Safari mobile browser gets the error e.getAttributeNames HOT 2
- [BUG] : When ' (single quote) is used any where in the text, the tooltip doesn't open HOT 4
- I have set opacity to 1 but I can still see though HOT 3
- [BUG] HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-tooltip.