Javascript 在大日历中修改工具提示

如何修改将鼠标悬停在事件上时显示的工具提示？我想包括更多信息（开始日期、结束日期、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
    }}
  />

函数事件（{Event}）{
返回(
{event.title}
{event.desc&&'：'+event.desc}
)
}

---

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

似乎无法在

react big calendar

中自定义事件工具提示

由于您有一个自定义的

事件

组件，并且如果您使用的是引导，那么您可以尝试使用和从

反应引导

实现这一点

当您离开目标元素时，覆盖/工具提示会立即关闭，因此事情变得棘手

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

下面是一个示例实现

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

单击工具提示内的“关闭”按钮关闭工具提示

单击工具提示之外的任何位置（包括目标），关闭工具提示

顺便说一句，我不认为这是一个好的解决方案，但可以是一个良好的开端

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>
  );
}

const IconStyle={
光标：“指针”
};
常量TooltipContent=（{onClose，event}）=>{
返回(
{event.title}
其他一些信息
按钮1
按钮2
);
};
功能事件（事件）{
const[showTooltip，setShowTooltip]=useState（false）；
常量关闭工具提示=（）=>{
设置显示工具提示（错误）；
};
常量openTooltip=（）=>{
设置显示工具提示（true）；
};
const ref=useRef（null）；
常量getTarget=（）=>{
返回ReactDOM.findDOMNode（ref.current）；
};
返回(
{event.title}
);
}

---

我添加了一个stackblitz演示，因为注释看起来事件工具提示无法在反应大日历中自定义

由于您有一个自定义的

事件

组件，并且如果您使用的是引导，那么您可以尝试使用和从

反应引导

实现这一点

当您离开目标元素时，覆盖/工具提示会立即关闭，因此事情变得棘手

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

下面是一个示例实现

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

单击工具提示内的“关闭”按钮关闭工具提示

单击工具提示之外的任何位置（包括目标），关闭工具提示

顺便说一句，我不认为这是一个好的解决方案，但可以是一个良好的开端

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>
  );
}

const IconStyle={
光标：“指针”
};
常量TooltipContent=（{onClose，event}）=>{
返回(
{event.title}
其他一些信息
按钮1
按钮2
);
};
功能事件（事件）{
const[showTooltip，setShowTooltip]=useState（false）；
常量关闭工具提示=（）=>{
设置显示工具提示（错误）；
};
常量openTooltip=（）=>{
设置显示工具提示（true）；
};
const ref=useRef（null）；
常量getTarget=（）=>{
返回ReactDOM.findDOMNode（ref.current）；
};
返回(
{event.title}
);
}

---

我添加了一个stackblitz演示作为注释

如果您使用的是自定义事件组件，您可以在日历道具中设置

tooltipAccessor={null}

，以禁用默认日历工具提示，并在自定义事件组件中添加常规HTML标题属性和HTML元素所需的信息

例如

---

Some text

如果您使用的是自定义事件组件，您只需在日历道具中设置

tooltipAccessor={null}

，即可禁用默认日历工具提示，并添加常规HTML标题属性，其中包含自定义事件组件中HTML元素所需的信息

例如

---

一些文本

我对你的回答不是解决了这个问题吗？@nithin Prevoius的问题是点击事件。这里是悬停事件OK。让我看看。这可能会有帮助。我对你的回答不是解决了这个问题吗？@nithin Prevoius的问题是点击事件。这里是悬停事件OK。让我看看。这可能会有帮助的是通讯的演示如果有人需要的话，这是问题评论中的演示