0

Estou usando o jQuery.Gantt em um projeto e preciso fazer diversas customizações. Uma das customizações é ao passar o mouse sobre um elemento (em azul) exibir um tooltip.
O problema é que há uma div que marca os finais de semana que está sobrepondo os elementos do gantt (itens em azul).
Se eu alterar o z-index dos elementos em azul eles vão sobrepor o cabeçalho de dias e mês no scroll horizontal.
Estou tentando buscar uma forma de colocar a div que destaca os finais de semana com z-index 0, os elementos em azul com z-index 1 e o cabeçalho com z-index 2, dessa forma, posso colocar o evento mouseover nos elementos em azul e exibir um tooltip.
Na estrutura que está o html seria possível conseguir este posicionamento?

.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>

Código no JSFiddle

6
  • Poderia colocar um exemplo funcional na pergunta demonstrando o funcionamento.
    – Meu ovo
    18/02/2020 às 14:32
  • @Sam está no link jsfiddle 18/02/2020 às 14:40
  • Entrei lá mas não vi o tooltip funcionando.
    – Meu ovo
    18/02/2020 às 14:44
  • O tooltip eu vou implementar ainda. O que preciso resolver é o posicionamento dos itens em azul. Se você passar o mouse sobre o primeiro item (coluna sat com o valor 24) vai ver que não consegue selecionar o texto (o elemento está "abaixo" da div) já o terceiro (coluna Mon) é possível selecionar o texto. Alterei o exemplo e coloquei um title na div para exemplificar o tooltip. 18/02/2020 às 14:46
  • Realmente tem uma div transparente por cima. Essa div que será o tooltip?
    – Meu ovo
    18/02/2020 às 14:50

1 Resposta 1

0

Consegui solucionar o problema basta adicionar a propriedade pointer-events: none; na div que destaca os finais de semana. Ao adicionar essa propriedade eu consigo selecionar o texto e a propriedade alt também funciona.

.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; pointer-events: none;"></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; pointer-events: none;"></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 title="24" class="bar" style="top: 63px; left: 90px; width: 29px;">
    <div class="fn-label">24</div>
  </div>
  <div title="24" class="bar" style="top: 63px; left: 120px; width: 29px;">
    <div class="fn-label">24</div>
  </div>
  <div title="24" class="bar" style="top: 63px; left: 150px; width: 29px;">
    <div class="fn-label">24</div>
  </div>
  <div title="24" class="bar" style="top: 63px; left: 180px; width: 29px;">
    <div class="fn-label">24</div>
  </div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .