[REACT] Rendering EventTooltip content with react components

[Fensterbank]

As far as I read out from the documentation, customizing event tooltip contents works by using the template callback and returning an html string.

I figured out to render the Tooltip content the react-way like this:

import React, { FunctionComponent } from 'react';

import { Button } from '@material-ui/core';
import ScheduleIcon from '@material-ui/icons/Schedule';
import { useTranslation } from 'react-i18next';

interface TooltipProps {
  children: any;
};

export const Tooltip: FunctionComponent<TooltipProps> = ({ children }) => {
  const { t } = useTranslation();
  const innerContent = () =>
    <div>
      <dl>
        <dt>{t('common:startDate')}</dt>
        <dd><ScheduleIcon /> {children.startText}</dd>
        <dt>{t('common:endDate')}</dt>
        <dd><ScheduleIcon /> {children.endText}</dd>
      </dl>
      <Button color="primary" onClick={() => console.log('Hello World')}>Click me</Button>
    </div>

  return <div id="tooltip-content">
    {children && innerContent()}
  </div>
}

This tooltip content component is rendered together with the Scheduler component:

return <>
      <BryntumScheduler
        ...
        features={{
          ...
          eventTooltip: {
            header: { titleAlign: 'start' },
            template: fetchTooltipHtml,
            hideDelay: 1000,
          }
        }}
      />
      <Tooltip>{tooltipData}</Tooltip>
    </>

The workaround is, that the fetchTooltipHtml callback is setting a state and reading the inner html of the rendered tooltip react component.

  const fetchTooltipHtml = (data: any) => {
    setTooltipData(data);
    return document.getElementById('tooltip-content')!.innerHTML;
  }

While this works, only a html clone is displayed and therefore no events or other react things are working there.

Is there a better way to do, what I'm trying to achieve?

[pmiklashevich]

Hello!

Having React component as a tooltip renderer is not supported. But we have a demo showing the idea of how React component as a renderer could be implemented. In scope of the demo we implemented column renderer. You can find it online here: https://bryntum.com/examples/scheduler/react/javascript/simple/build/index.html

Please pay attention to the DELAY and IMPORTANT columns.
If you look at the source locally, you can find:
Scheduler/examples/react/javascript/simple/src/components/DemoButton.jsx
Scheduler/examples/react/javascript/simple/src/components/DemoEditor.jsx
They are react components.
In Scheduler/examples/react/javascript/simple/src/containers/Main.js they are imported and used as renderer and editor.
In Scheduler/examples/react/_shared/src/lib/BryntumScheduler.js cells are processed and React portals are created. Please search for "ReactDOM.createPortal".

Ideally it should look like this:

features={{
    eventTooltip : {
        header : { titleAlign : 'start' },
        template : tplData => <DemoEventTooltip tplData={tplData} />,
        hideDelay : 1000
    }
}}

But that is not currently supported. What you return from template function should be html string or promise in current implementation. https://www.bryntum.com/docs/scheduler/#Core/widget/Tooltip#config-getHtml

Therefore, you can get inspired by what we implemented in our demo and try to figure out the best solution for you. Meanwhile we will discuss it in the team and let you know if we're going to support out of the box or not.

And of course we offer professional services, so if you need our help to have this implemented, please contact our sales@bryntum com for a quote.

Best regards,
Pavel

[david10sing]

+1

[fabio.mazza]

Hi David,

Were you able to apply the Pavel's suggestion? If not, please open a new post and we will glad to answer and help you if your question is different.

Thank you.

[david10sing]

Hi Fabio,

In Pavel's suggestion, he said that this is currently not implemented.

That's why I put a +1 for this request.

It would be really great if we could pass react components to the renderer class.

[saki]

Using a React component in tooltips and other places is on our roadmap and we will address it during 2021. If you need it sooner you can sponsor the feature. The details are here: https://www.bryntum.com/services

[ssajafi]

Is this feature already supported, if not, is there any estimates when it could be available?

[saki]

It is not yet supported. We estimate that we can tackle it in a couple of months. If it's critical for your project and you need it sooner then see please https://www.bryntum.com/services

[rapiduser]

It is not yet supported. We estimate that we can tackle it in a couple of months. If it's critical for your project and you need it sooner then see please https://www.bryntum.com/services

Do you know when/if this will be on the road map of features in a future release?

[alex.l]

There is no special ticket for this, we are working on it step by step to support that for all frameworks.

Try to use this override meanwhile:

template() {
   return <custom-tag anyAttribute=`"${(new Date()).getTime()}"`></custom-tag>
}