Dhtmlx scheduler tooltip incorrect position


#1
  1. mouse over the event

  1. Move the mouse gently to position the tooltip correctly.

How can I set the initial position of the tooltip?
Or can I fix this error?

PS. I try this code but It does not work.

scheduler.config.tooltip_offset_x = 30; scheduler.config.tooltip_offset_y = 40;

here is my code

// https://docs.dhtmlx.com/scheduler/tooltips.html
// import 'codebase/ext/dhtmlxscheduler_tooltip.js';
import { Scheduler } from './Scheduler';
import _ from 'lodash';
import API from 'api';

const localeMessage = window.__localeMessage;
let currentEvent = {
    eventId: null,
    tooltip: null
};

/**
 * @description 주간/월간에서는 API에서 상세 데이터를 받아와야 하기 때문에 debounce를 써서 API 호출 최소화
 */
let debounce = _.debounce((eventId) => {
    let tooltip = '';

    async function getEvent(id) {        
        if (scheduler.dhtmlXTooltip.isTooltip()) scheduler.dhtmlXTooltip.hide();

        try {
            await API.local.schedule.get(id).then((res) => {
                if(res.isMemo) {  // NOTE: 메모
                    tooltip =  (res.memo) ? `<b>${localeMessage.popup.schedule.memo}</b>:<br> ${res.memo.replace(/(?:\r\n|\r|\n)/g, '<br />')}<br>` : '';
                    currentEvent.id = res.id;
                    currentEvent.tooltip = tooltip;
                    // return tooltip;
                } else {            // NOTE: 예약
                    tooltip += (res.customer.name) ? `<b>${localeMessage.popup.schedule.name}</b>: ${res.customer.name}<br>` : '';
                    tooltip += (res.customer.uniqueNumber) ? `<b>${localeMessage.popup.schedule.uniqueNumber}</b>: ${res.customer.uniqueNumber}<br>` : '';
                    tooltip += (res.customer.birthDate) ? `<b>${localeMessage.popup.schedule.birthDate}</b>: ${res.customer.birthDate}<br>` : '';
                    tooltip += (res.customer.telNumbers) ? `<b>${localeMessage.popup.schedule.primaryTel}</b>: ${res.customer.telNumbers.filter(item => item.isPrimary === true)[0].number}<br>` : '';
                    tooltip += (res.staffs) ? `<b>${localeMessage.popup.schedule.scheduleStaff}</b>: 
                                    ${res.staffs.
                                        filter(item => item.activated === true).
                                        map(item => item.path).toString()}<br>` : '';
                    tooltip += (res.scheduleItems) ? `<b>${localeMessage.popup.schedule.scheduleItem}</b>: 
                                    ${res.scheduleItems.
                                        filter(item => item.activated === true).
                                        map(item => item.path).toString()}<br>` : '';
                    tooltip += (res.serviceItems) ? `<b>${localeMessage.popup.schedule.serviceItem}</b>: 
                                    ${res.serviceItems.
                                        filter(item => item.activated === true).
                                        map(item => item.path).toString()}<br>` : '';                                                
                    tooltip += (res.memo) ? `<b>${localeMessage.popup.schedule.memo}</b>:<br> ${res.memo.replace(/(?:\r\n|\r|\n)/g, '<br />')}<br>` : '';
                    currentEvent.id = res.id;
                    currentEvent.tooltip = tooltip;
                    // return tooltip;            
                }
                // return tooltip;
                // console.log('tooltip', scheduler.dhtmlXTooltip.isTooltip());
            });
            if (!scheduler.dhtmlXTooltip.isTooltip()) scheduler.dhtmlXTooltip.show('mouseover', tooltip);
        } catch (err) {
            console.log('err', err);
        }
    };

    getEvent(eventId);
}, 100, { leading: false, trailing: true });

/**
 * @description 값이 존재하는 항목에 대해서만 표시
 */

scheduler.templates.tooltip_text = (start, end, event) => {
    if (event.createTime) {
        if (currentEvent.id === event.id) {
            return currentEvent.tooltip;
        } else {
            scheduler.dhtmlXTooltip.config.delta_x = 10;
            scheduler.dhtmlXTooltip.config.delta_y = 60;
            return debounce(event.id);
        }
    }
}

// TODO: 툴팁오픈시(예약)
scheduler.attachEvent("onBeforeTooltip", (id) => {
    if (id && Scheduler.getIsOpenContextMenu()) {   // NOTE: 이벤트 아이디와 컨텍스트 메뉴가 오픈된 상황
        return false;
    } else {
        return true;
    }
        // 대한민국 휴일 부분에서 노출 시키지 않도록 처리    
    // if(scheduler.getEvent(id).class) {
    //     return false;
    // } else {
    //     return true;
    // }
});

// TODO: 이벤트가 수정될 경우 툴팁 초기화 필요
scheduler.attachEvent('updateCurrentEvent', () => {
    console.log('updateCurrentEventupdateCurrentEventupdateCurrentEventupdateCurrentEvent')
    currentEvent.eventId = null;
    currentEvent.tooltip = null;
}); 

#2
  1. If you move the mouse gently, the tooltip will appear at the correct position.


#3

Hi,

Unfortunately, I can’t reproduce the issue locally. Possibly the issue related to the fact that you create variable “tooltip” that already exists in the source code in the tooltip extension. You put there empty string:

let tooltip = '';

Try to rename this variable.

If that doesn’t help you to solve the issue - please reproduce the issue in the dhtmlx snippet system and send me the updated link http://snippet.dhtmlx.com/f7285fd22