[ANGULAR] Tooltip on timeRanges

[Aniket]

Team,

Is it possible to have a tooltip on the TimeRanges to show its name on hovering?

[pmiklashevich]

Hello!

It's not supported out of the box. I've opened a feature request: https://github.com/bryntum/support/issues/1069

If you add a tooltip like this:

import Tooltip from '../../lib/Core/widget/Tooltip.js';

new Tooltip({
    forSelector : '.b-sch-timerange',
    getHtml     : ({ tip, element, activeTarget, event }) => {
        const
            timeRangeId = activeTarget.dataset.id,
            timeRangeRecord = scheduler.features.timeRanges.store.getById(timeRangeId);

    return timeRangeRecord.name;
}
});

It will work for the header of the rime ranges only. To make it work for ranges too, you can try to set pointer-events:

	<style>
		.b-sch-timerange.b-sch-range {
			pointer-events: all;
		}
	</style>

Though then the ranges become clickable and you will not be able to drag create a new event where you have a resource.

Hope this will help you to achieve what you need!

Best,
Pavel

[Aniket]

Hi Pavel,

I was able to display the name of the TimeRange in the tooltip.

However, I could not get this part of your explaination

It will work for the header of the rime ranges only. To make it work for ranges too, you can try to set pointer-events:

CODE: SELECT ALL

<style>
	.b-sch-timerange.b-sch-range {
		pointer-events: all;
	}
</style>

Though then the ranges become clickable and you will not be able to drag create a new event where you have a resource.

Could you explain in a bit simpler terms again?

[mats]

The tooltip we discuss is about the header element, the time ranges are also rendered in the body of the schedule and in this area you will not get the tooltip unless you force elements to receive pointer events using Pavel's CSS override.

[Aniket]

Hello, i am using bryntum scheduler as angular wrapper, can you suggest and help, how can i implement this with typescript

Hello!

It's not supported out of the box. I've opened a feature request: https://github.com/bryntum/support/issues/1069

If you add a tooltip like this:

import Tooltip from '../../lib/Core/widget/Tooltip.js';

new Tooltip({
    forSelector : '.b-sch-timerange',
    getHtml     : ({ tip, element, activeTarget, event }) => {
        const
            timeRangeId = activeTarget.dataset.id,
            timeRangeRecord = scheduler.features.timeRanges.store.getById(timeRangeId);

    return timeRangeRecord.name;
}
});

It will work for the header of the rime ranges only. To make it work for ranges too, you can try to set pointer-events:

	<style>
		.b-sch-timerange.b-sch-range {
			pointer-events: all;
		}
	</style>

Though then the ranges become clickable and you will not be able to drag create a new event where you have a resource.

Hope this will help you to achieve what you need!

Best,
Pavel

[pmiklashevich]

Let's take angular-8 demo for example. Please open Scheduler/examples/angular/angular-8/src/app/app.component.ts
See "ngAfterViewInit" function. Here you can place javascript code ("new Tooltip({..."). And styles can be placed in Scheduler/examples/angular/angular-8/src/app/app.component.scss

[Aniket]

Thanks it worked perfectly fine