Async event tooltip

[Luffy]

how to produce an async event tooltip on bryntum,

This is not working

eventTooltip: {
      template: async data => {
        const resp = await makeEventTootip(data); // returns string
        return resp;
      },
    },

Scheduler.png (2.89 KiB) Viewed 2306 times

[sergey.maltsev]

Hi, Luffy!

template should return a valid html string.
Please find the information here.
https://www.bryntum.com/docs/scheduler/#Common/widget/Tooltip#function-template

If you want implement your own tooltip then do it in beforeShow event and return false to prevent default one.
https://www.bryntum.com/docs/scheduler/#Common/widget/Tooltip#event-beforeShow

[Luffy]

I have done that and it is working with a time after a delay, tooltip is not showing at the very first time when we move the pointer there and we have to wait until 'set timeout' period is passed to see the tooltip, aslo we have to mouse hover again to see the tooltip(in this case after 2 seconds)

Is there way to fix this?

screen-capture (1).gif (748.45 KiB) Viewed 2302 times

I have edited your tooltip demo as below

let scheduler = new Scheduler({
  appendTo: "container",
  minHeight: "20em",
  resources: resources,
  events: events,
  startDate: new Date(2017, 0, 1, 6),
  endDate: new Date(2017, 0, 1, 20),
  viewPreset: "hourAndDay",

  features: {
    scheduleTooltip: false,
    eventTooltip: {
      header: {
        titleAlign: "start"
      },
      template: () => "",
      listeners: {
        beforeShow: ({ source: tip }) => {
          getAsyncData().then(response => {
            tip.html = response.name;
            return false;
          });
        }
      }
    }
  },

  columns: [{ text: "Name", field: "name", width: 130 }]
});

const getAsyncData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ name: "Test async tooltip" });
    }, 2000);
  });
};

I added

tip.html = false;

to show a loading spinner, but it is also not working

[sergey.maltsev]

Hi, Luffy.

Thank you for reporting this bug. I've created a ticket to fix it.
https://github.com/bryntum/support/issues/122

Showing async content code can be found here in ToolTip docs.
https://www.bryntum.com/docs/scheduler/#Common/widget/Tooltip

No need to return false if you are going to reuse existing tooltip.

[Luffy]

Any workaround for this?

[sergey.maltsev]

Hi, Luffy!

You could try something like this or wait for the fix.

beforeShow : ({ source: tip }) => {
    const forElement = tip.activeTarget;
    getAsyncData().then(response => {
        new Tooltip({
            dismissDelay : 1000,
            forElement   : forElement,
            html         : response.name
        }).show();
    });
    return false;
}

[Luffy]

Hi, Luffy!

You could try something like this or wait for the fix.

beforeShow : ({ source: tip }) => {
    const forElement = tip.activeTarget;
    getAsyncData().then(response => {
        new Tooltip({
            dismissDelay : 1000,
            forElement   : forElement,
            html         : response.name
        }).show();
    });
    return false;
}

This is not working as expected

tooltip Demo.gif (1.14 MiB) Viewed 2251 times

could you please let us know when this issue has been fixed

[sergey.maltsev]

Hi!

What exactly do you expect from the code? How should it work?

[Luffy]

Hello Sergey,

When we mouse hover to an event we need to show a spinner while the content is being loaded and no need to auto hide the tooltip

[sergey.maltsev]

Hi!

You should update code to add this behavior.
I just gave you a tip on how to use custom Tooltip in beforeShow event.

Or please just wait until this ticket is resolved so you won't need any extra code.