0
I’m using the jQuery.Gantt in a project and need to do several customizations.
One of the customizations is to hover the mouse over an element (in blue) display a tooltip.
The problem is that there is a div that marks weekends that is superimposing Gantt elements (items in blue).
If I change the z-index of the elements in blue they will overwrite the header of days and month in the horizontal scroll.
I’m trying to find a way to put the div that highlights the weekends with z-index 0, the elements in blue with z-index 1 and the heading with z-index 2, this way I can put the event mouseover in the elements in blue and display a tooltip.
In the structure that is html it would be possible to achieve this positioning?
.dataPanel {
outline: 1px solid #DDD;
background-position-y: 15px;
background-size: 30px 48px;
background-image: linear-gradient(to left, rgba(153, 152, 153, 0.7) 1px, transparent 1px), linear-gradient(0deg, #E7ECEF 0%, #E7ECEF 53%, #ECF1F4 53%, #ECF1F4 100%);
background-repeat: repeat;
position: relative;
font-family: 'Verdana, sans-serif';
}
.header {
position: sticky;
top: 0;
z-index: 600;
width: 241px;
background: #fff;
height: 63px;
}
.row {
float: left;
height: 24px;
line-height: 24px;
margin: 0;
}
.dayPosition {
top: 46px;
}
.monthPosition {
top: 15px;
}
.day {
background-color: #fff;
width: 24px;
line-height: 24px;
text-align: center;
border-bottom: 1px solid #DDD;
border-right: 1px solid #DDD;
font-size: 10px;
color: #007E7A;
}
.row .sa,
.row .sn,
.row .wd {
height: 24px;
text-align: center;
width: 29px;
}
.bar {
background-color: #D0E4FD;
height: 18px;
margin: 0 3px 3px 0;
position: absolute;
text-align: center;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.25) inset;
border-radius: 3px;
}<div class="dataPanel" style="width: 27540px; height: 732px;">
<div class="header">
<div class="row header monthPosition">
JAN
</div>
<div class="row header dayPosition">
<div class="row day wd" id="dw-1559098800000" data-repdate="1559098800000">
<div class="fn-label">WED</div>
</div>
<div class="row day wd" id="dw-1559185200000" data-repdate="1559185200000">
<div class="fn-label">THU</div>
</div>
<div class="row day wd" id="dw-1559271600000" data-repdate="1559271600000">
<div class="fn-label">FRI</div>
</div>
<div class="row day sa" id="dw-1559358000000" data-repdate="1559358000000">
<div class="fn-label">SAT</div>
<div style="background-color: rgba(100, 100, 100, 0.1); height: 673px; width: 30px; bottom: 0px; top: 245px; position: initial;"></div>
</div>
<div class="row day sn" id="dw-1559444400000" data-repdate="1559444400000">
<div class="fn-label">SUN</div>
<div style="background-color: rgba(100, 100, 100, 0.1); height: 673px; width: 30px; bottom: 0px; top: 245px; position: initial;"></div>
</div>
<div class="row day wd" id="dw-1559530800000" data-repdate="1559530800000">
<div class="fn-label">MON</div>
</div>
<div class="row day wd" id="dw-1559617200000" data-repdate="1559617200000">
<div class="fn-label">TUE</div>
</div>
<div class="row day wd" id="dw-1559703600000" data-repdate="1559703600000">
<div class="fn-label">WED</div>
</div>
</div>
</div>
<div class="bar" style="top: 63px; left: 90px; width: 29px;">
<div class="fn-label">24</div>
</div>
<div class="bar" style="top: 63px; left: 120px; width: 29px;">
<div class="fn-label">24</div>
</div>
<div class="bar" style="top: 63px; left: 150px; width: 29px;">
<div class="fn-label">24</div>
</div>
<div class="bar" style="top: 63px; left: 180px; width: 29px;">
<div class="fn-label">24</div>
</div>
</div>
Could put a functional example in the question demonstrating the functioning.
– Sam
@Sam is on the jsfiddle link
– Tiago Crizanto
I went in there but I didn’t see the tooltip working.
– Sam
The tooltip I will implement yet. What I need to solve is the placement of the items in blue. If you hover over the first item (column Sat with value 24) you will see that you cannot select the text (the element is "below" the div) while the third (column Mon) you can select the text. I changed the example and put a title in the div to exemplify the tooltip.
– Tiago Crizanto
There really is a transparent div on top. That div that will be the tooltip?
– Sam
Yes. I updated the example and put a title in the div. If you hover over the first 2 the title does not appear. Already the rest appears a title informing the day of the week.
– Tiago Crizanto