Modifying the tooltip in react-big-calendar

问题

How to modify the tooltip that appears when you hover over an event? I would like to include more information (start date, end date, id, buttons(edit, delete). I tried:

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
    }}
  />

but this only changes the event and not the tooltip that appears when you hover over the event. Is modifying the tooltip possible at all?

回答1:

Looks like the Event tooltip is not customizable in react-big-calendar

As you have a custom Event component and if you are using bootstrap, you can try to achieve this using Overlay and Tooltip from react-bootstrap.

Things get tricky as overlays/tooltips close as soon as you move away from the target element.

As your tooltip contains delete, edit buttons, you need to have some logic to make the tooltip stay on screen and handle when to close the tooltip.

A sample implementation below..

Opens tooltip on mouseover event.

Closes tooltip on click of close button inside tooltip.

Closes tooltip on click anywhere outside tooltip (including the target).

BTW I don't see this as a good solution, but can be a head start.

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

I have added a stackblitz demo as comment

回答2:

If you are using a custom event component, you can just set tooltipAccessor={null} in calendar props to disable default calendar tooltip and add regular HTML title attribute with the information you need on HTML element in your custom event component.

For eg.

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

来源：https://stackoverflow.com/questions/58605394/modifying-the-tooltip-in-react-big-calendar

标签

javascript

reactjs

react-datepicker