Mouse Enter/Leave events for hover tooltips

matthiasg commented 5 years ago

Version

1.10.0

Development Environment

Chrome 71

Current Behavior

Currently it is possible to show popups on click but not on hover over an item

Expected Behavior

It should be possible to raise and mouseEnter/mouseLeave/focus which would allow implementors to show a tooltip with more event details before clicking the event. Since this event would need to be registered on the appropriate div it should be included in the calendar.

henryfool91 commented 2 years ago

Hey guys, may be there is exist any way to show tooltip on event hover? This issue looks abandoned I tried to put tooltip in 'time' template, but with no luck, it isn't working that way, couldn't figure out why

adhrinae commented 2 years ago

@henryfool91

Unfortunately, we don't support hover events for schedules(events). You can leverage the event delegation and native DOM APIs to show a tooltip when hovering over the schedule. Here's an example:

(Disclaimer: You need to create your own tooltip.)

Suppose there's a tooltip element in your application somewhere. I recommend it should be right below the body element.

<body>
    <!-- This is a container of the calendar instance. --> 
    <div id="calendar"></calendar>
    <!-- Your tooltip. It's hidden at the beginning. -->
    <div id="tooltip" hidden></div>
</body>

Then let's bind some events.

const cal = new Calendar('#calendar', {
  defaultView: 'month',
  // ...
});
// ...

const tooltip = document.querySelector('#tooltip');
// This event listener should be debounced or it may affect the performance.
document.addEventListener('mouseover', (e) => {
  const el = e.target;

  // You need to choose a different selector for schedules in the other view.
  const schedule = el.closest('.tui-full-calendar-weekday-schedule');

  if (schedule) {
    // when the mouse leaves the schedule, hide the tooltip.
    schedule.addEventListener(
      'mouseleave',
      () => {
        tooltip.hidden = true;
      },
      { once: true } // Keep in mind that `options.once` doesn't support IE.
    );

    // Get the position of the schedule and set styles for the tooltip.
    const {
      x,
      width,
      bottom: scheduleBottom,
    } = schedule.getBoundingClientRect();
    tooltip.hidden = false;
    Object.assign(tooltip.style, {
      top: `${scheduleBottom}px`,
      left: `${x + Math.round(width / 2)}px`,
    });
  }
});

I hope this would be helpful. The working sandbox is here.

https://stackblitz.com/edit/tui-calendar-playground-ixbu4a?file=index.js

henryfool91 commented 2 years ago

Wow, thanks a lot for such a detailed and helpful response, you are great!

nhn / tui.calendar