Tooltip in custom layer

Gantt
#1

I have added several custom layers to my task using gantt.addTaskLayer. Now I want to spend each Layer its own tooltip. I display each employee as task and each holiday of that employee as individual layer. All layers of the same employee are displayed on the same vertical position.

When using the title attribute of HTML element this is not the same as using gantt.templates.tooltip_text, which is what I like to use for the custom layers too. How can I use this for the custom layers and display individual tooltips for each layer?

#2

I think, it’s impossible to use tooltip extension. But you can try something like this.

gantt.addTaskLayer(function lay1(task){
            var el = document.createElement("DIV");
            var sizes = gantt.getTaskPosition(task, task.deadline);
            el.style.position = "absolute";
            el.style.left = sizes.left - 30 + 'px';
            el.style.top = sizes.top + 'px';
            el.innerHTML = "Test";

            var toolTip = document.createElement("DIV");
            toolTip.className = "gantt_tooltip";
            toolTip.style.position = "absolute";
            toolTip.innerHTML = "ToolTip Text";
            toolTip.style.display = "none";
            el.appendChild(toolTip);

            el.onmouseover = function(){
                toolTip.style.display = "block";
            };

            el.onmouseout = function(){
                toolTip.style.display = "none";
            };

            return el;
        });
#3

Your suggestion is very similar to what I try. But making the tooltip a child of the layer makes it impossible to set overflow=hidden, because otherwise the tooltip is truncated too. In the original layers overflow is hidden.

#4

Why are you want to set overflow = hidden?
Possibly you can try following elements structure.

var container = document.createElement("DIV"),
content = codument.createElement("DIV"),
toolTip = document.createElement("DIV");

content.style.overflow = "hidden";

container.appendChild(content);
conteiner.appendChild(toolTip);
#5

I also tried with nested DIV putting content div and tooltip DIV into the outer DIV and making overlow of content DIV being “hidden”, but this did not work.

The reason why i want to make overflow hidden for content, is to prevent it from being rendered outside of the DIV. The original gantt bars also have overflow = hidden for the same reason.

#6

You can try dhtmlXPopup (docs.dhtmlx.com/popup__index.html)

gantt.addTaskLayer(function lay1(task){
            var el = document.createElement("DIV");
            var sizes = gantt.getTaskPosition(task, task.deadline);
            el.style.position = "absolute";
            el.style.left = sizes.left - 30 + 'px';
            el.style.top = sizes.top + 'px';
            el.innerHTML = "Test";

            var myPop = new dhtmlXPopup();
            myPop.attachHTML("Tooltip TEXT");

            el.onmouseover = function(){
                var pos = el.getBoundingClientRect();

                myPop.show(pos.left,pos.top,Math.round(pos.width / 2),pos.height);
            };

            el.onmouseout = function(){
                myPop.hide();
            };

            return el;
        });