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)}
    ponents={{
      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?

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)}
    ponents={{
      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?

• javascript
• reactjs
• react-datepicker

Share Improve this question Follow asked Oct 29, 2019 at 10:17 UmbroUmbro 2,2141212 gold badges4646 silver badges107107 bronze badges 4

• Isn't this solved with my answer to your previous question ? – Nithin Thampi Commented Oct 30, 2019 at 8:37
• @nithin Prevoius question was click on event. Here is hover on event – Umbro Commented Oct 30, 2019 at 8:42
• Ok. Let me take a look. – Nithin Thampi Commented Oct 30, 2019 at 14:45
• 1 This might help Demo – Nithin Thampi Commented Oct 30, 2019 at 16:07

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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

As you have a custom Event ponent 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 ment

If you are using a custom event ponent, 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 ponent.

For eg.

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

This is issue solved with this PR

Adding this prop solved my problem. You can modify empty string if you want to show something else.

<Calendar tooltipAccessor={() => ""} ... />