我遇到问题。所以,我正在制作反应组件,并且我需要使用按钮的工具提示。工具提示正在工作,但我无法将它放在我想要的位置(我的意思是位于按钮的中心位置)。React组件不起作用
当我安慰日志,它显示了e.target.offsetLeft和e.target.offsetTop是0,但我给它从双方保证金。
但实际上,当我把这个代码,必须把提示,则不显示整个工具提示:
tooltip.style.left = options.x + (options.w/2) - (tooltip.offsetWidth/2) + "px";
tooltip.style.top = (options.y - tooltip.offsetHeight - 10) + "px";
它是我整个代码:
import React from 'react';
import ReactDOM from 'react-dom';
import Style from 'style-it';
var Ink = require('react-ink');
import FontIcon from '../FontIcon/FontIcon';
var IconButton = React.createClass({
getInitialState() {
return {
iconStyle: "",
style: "",
cursorPos: {},
};
},
render() {
var _props = this.props,
...
globalTooltip = null,
...
function createTooltip(options) {
var tooltip = document.createElement("div");
tooltip.className = "tooltip";
tooltip.appendChild(document.createTextNode(_props.tooltip));
document.body.appendChild(tooltip);
tooltip.style.left = options.x + (options.w/2) - (tooltip.offsetWidth/2) + "px";
tooltip.style.top = (options.y - tooltip.offsetHeight - 10) + "px";
globalTooltip = tooltip;
console.log(options);
};
function showTooltip(e){
var options = {
w: e.target.offsetWidth,
x: e.target.offsetLeft,
y: e.target.offsetTop,
};
createTooltip(options);
};
function removeTooltip(e){
globalTooltip.parentNode.removeChild(globalTooltip);
};
return(
...
);
}});
ReactDOM.render(
<IconButton ... tooltip="aaaaa" />, document.getElementById('app')
);
而在这一刻,我可以甚至没有控制台登录选项对象:/
你可以使用'display'显示/隐藏tooltip元素CSS属性根据组件的道具设置为'none'或'block'。它甚至会比更新DOM更快。 –
upvoted for @ free-soul的回答,最好用ReactJS的方式来完成。 –
它工作得很好,但我不能把它放在我想要的地方 – Karol