[英]How to implement tooltip in React stateless component
All: 所有:
I am pretty new to React, what I try to build is a tooltip response to a hover on a SVG element, for example, I build a STATELESS component like: 我对React很陌生,我尝试构建的是对SVG元素上的鼠标悬停的工具提示响应,例如,我构建了一个STATELESS组件,例如:
(props) =>{
var data = props.data;
return (
<g>
{
data.map((d, si) => {
var logoTrans = "translate(10,"+ si*20+")";
return (
<g transform={logoTrans} key={si}>
<rect x="20" y="12"></rect>
</g>
)
})
}
</g>
<g>
{
data.map((d, si) => {
var logoTrans = "translate(10,"+ si*20+")";
return (
<g transform={logoTrans} key={si}>
<text>{d}</text>
</g>
)
})
}
</g>
)
}
What I want to do is to hover each <rect>
and and according <text>
shows up(with same si, the text originally display:none
) 我想要做的是将每个<rect>
悬停,然后根据<text>
出现(使用相同的si,该文本最初display:none
)
I've just open-sourced react-svg-tooltip which hopefully addresses your requirements. 我刚刚开源了react-svg-tooltip ,希望可以解决您的需求。
It allows to link SVG tooltips to arbitrary SVG elements via references, ie it doesn't matter if your rect
and text
are in parallel level groups. 它允许通过引用将SVG工具提示链接到任意SVG元素,即,您的rect
和text
是否在并行级别组中都没有关系。
All mouse hovering logic is handled behind the scenes. 所有鼠标悬停逻辑均在后台处理。 Moreover, the library makes sure that your tooltips are always rendered on top (by usage of a React portal). 此外,该库可确保始终在顶部显示您的工具提示(通过使用React门户)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.