修改react big日历中的工具提示

Question

如何修改悬停在事件上时显示的工具提示？我想包括更多的信息(开始日期，结束日期，id，按钮(编辑，删除(。我试过了：

function Event({ event }) {
return (
<span>
<strong>{event.title}</strong>
{event.desc && ':  ' + event.desc}
</span>
)
}
<Calendar
events={events}
localizer={localizer}
defaultDate={new Date(2015, 3, 1)}
components={{
event: Event
}}
/>

但这只会更改事件，而不会更改悬停在事件上时显示的工具提示。是否可以修改工具提示？

Answer 1

看起来事件工具提示在react-big-calendar中不可自定义

由于您有一个自定义的Event组件，并且如果您使用引导程序，您可以尝试使用react-bootstrap中的Overlay和Tooltip来实现这一点。

当你离开目标元素时，覆盖/工具提示就会关闭，这会让事情变得棘手。

由于工具提示包含删除、编辑按钮，因此需要有一些逻辑使工具提示保持在屏幕上并处理何时关闭工具提示。

下面是一个示例实现。。

打开鼠标悬停事件的工具提示。

单击工具提示内的关闭按钮时关闭工具提示。

单击工具提示外的任何位置(包括目标(时关闭工具提示。

BTW我认为这不是一个好的解决方案，但可能是一个领先的开始。

const IconStyle = {
cursor: "pointer"
};
const TooltipContent = ({ onClose, event }) => {
return (
<React.Fragment>
<FontAwesomeIcon
icon={faWindowClose}
className="pull-right"
style={IconStyle}
onClick={onClose}
/>
<div>{event.title}</div>
<div>Some other Info</div>
<Row>
<Button variant="light">Button 1</Button>
<Button variant="light">Button 2</Button>
</Row>
</React.Fragment>
);
};
function Event(event) {
const [showTooltip, setShowTooltip] = useState(false);
const closeTooltip = () => {
setShowTooltip(false);
};
const openTooltip = () => {
setShowTooltip(true);
};
const ref = useRef(null);
const getTarget = () => {
return ReactDOM.findDOMNode(ref.current);
};
return (
<div ref={ref}>
<span onMouseOver={openTooltip}>{event.title}</span>
<Overlay
rootClose
target={getTarget}
show={showTooltip}
placement="top"
onHide={closeTooltip}
>
<Tooltip id="test">
<TooltipContent event={event} onClose={closeTooltip} />
</Tooltip>
</Overlay>
</div>
);
}

我添加了一个stackblitz演示作为评论

Answer 2

如果您正在使用自定义事件组件，您只需在日历道具中设置tooltipAccessor={null}即可禁用默认的日历工具提示，并在自定义事件组件中添加常规的HTML标题属性，其中包含所需的HTML元素信息。

例如

<div title="Some text">Some text</div>