In Y Axis, I have 2 divs, I wanted to show different tooltip for both of them, how it could be achieved?
Hello, @AshishVerma
I can offer to use one of the scheduler’s sample, where Y-Axis and events have different tooltips.
Docs (with step-by-step instruction): https://docs.dhtmlx.com/scheduler/samples/06_timeline/12_section_tooltip.html
First of all, I wrap label and section.description in divs with two different classes in timeline_scale_label
:
return "<div class='section_label'>" + label + "</div>" + "</br>" + "<div class='section_description'>" + section.description + "</div>";
After that isTooltipTarget checks, if there are elements with CSS classes “section_label” or “section_description”. If it’s so, the tooltip will be displayed for target elements.
if (css == "section_label" || css == "section_description" || css == "dhtmlXTooltip") { return { classname: css }; } target = target.parentNode;
Finally, when onMouseMove event fires, I add two checks for these 2 divs in each label. If the user moving the mouse over one of the target elements (which were specified in scheduler.dhtmlXTooltip.isTooltipTarget), the appropriate tooltip will be shown. The text of the tooltip can be configured in onMouseMove handler.
if (tooltipTarget.classname == "section_label")
if (tooltipTarget.classname == "section_description")
p.s. In addition, I’ve made label and description in two lines. Maybe afterward it will be useful if you want to separate these dives into two lines. If it’s not necessary, please, delete .dhx_matrix_scell in .
The example with detailed instruction (step by step) is here: http://snippet.dhtmlx.com/8df0779f7
Does it help you to solve your issue?
Thanks Alisa, I should have marked this as closed earlier, as I did exactly what you mentioned already
But thanks for your help, hopefully it might be helpful to someone else later on!