Premium support for our pure JavaScript UI components


Post by ofirk »

Hi, according to scheduler docs:

By default a Popup is transient, and will close when the user clicks or taps outside its owned widgets and when focus moves outside its owned widgets.
Note: Modal popups won't close when focus moves outside even if autoClose is true.
Configure as false to make a Popup non-transient.

So as i understand, if i set 'autoClose: false' on eventTooltip the tooltip will not close as i move or click my mouse outside the tooltip.

as you can see this is not the case:
https://codepen.io/ofirkatz/pen/BaryMmv


Post by tasnim »

Hi,
Reproduced! we'll check what's wrong! Here is a ticket : https://github.com/bryntum/support/issues/4882

Thank you for your report.


Post by ofirk »

"showOnHover: false" also not working


Post by Animal »

This seems like a documentation error.

Tooltips are ephemeral. They only show when hovering the target.

As soon as the mouse leaves the target element, they disappear. That is conventional tooltip behaviour.

What kind of UI interaction are you wanting to create?


Post by ofirk »

i would like to have the tooltip open only upon clicking on an item in the context menu, while also not closing it when the mouse travels elsewhere.


Post by Animal »

What you describe, clicking a context menu item to show a popup is not the behaviour of a tooltip and definitely not the behaviour of the eventTooltip feature.

You want to click on a context menu item to show some extra information about the event?

You need to to customize the eventMenu feature with an extra option such as "Show details". The API docs for the eventMenu feature show you how to do this, and there is also en online example.

Your handler will create (unless it already exists - cache it in a property of the Scheduler) a Popup which you populate with the information you need, then show the Popup.


Post by ofirk »

Thanks, I tried to go that route but I struggle with creating the popup...
I already have a working tooltip template I created like so:

      
eventEditFeature: { template: data => { return this.getTooltipTemplate(data); } },

getTooltipTemplate returns some markup.

How would I go about converting this logic to the context menu opening a popup with that template?


Post by Animal »

Creating a Popup is as simple as new Popup({...}). But we're not there yet.

event edit feature?

OK. You definitely want an extra context menu item?

You need to configure the eventMenu feature so that an extra option appears in it. That's your first step. When you get that appearing, then is the time to think about writing the handler.


Post by ofirk »

Oh i already created an item in the context menu, actually that was the easy part :)
i just dont know how to go forward...

eventMenuFeature:{
	showInfo: {
            text: 'Show Info',
            onItem: ({ eventRecord }) => {
              ...something something...
            }
         },
}

Post by Animal »

The onItem event doesn't look to be fully documented. It contains much more contextual information that what the docs say which provides everything you need. I will fix that.

So you need something like

eventMenuFeature:{
	showInfo: {
            text: 'Show Info',
            onItem: ({ source : scheduler, eventRecord, eventElement }) => {
              const infoPopup = scheduler.infoPopup || (scheduler.infoPopup = new Popup({
                ...your configuration
              });

              infoPopup.html = // howe ver you generate your HTML - your template function?
              infoPopup.showBy(eventElement);
            }
         },
}

Post Reply