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>
}
return <>
<BryntumScheduler
...
features={{
...
eventTooltip: {
header: { titleAlign: 'start' },
template: fetchTooltipHtml,
hideDelay: 1000,
}
}}
/>
<Tooltip>{tooltipData}</Tooltip>
</>
const fetchTooltipHtml = (data: any) => {
setTooltipData(data);
return document.getElementById('tooltip-content')!.innerHTML;
}
Is there a better way to do, what I'm trying to achieve?