Блог

Главная - Вопросы по программированию - Всплывающая подсказка не выводится из ячейки slickgrid. Есть ли какое-либо свойство, доступное для ее вывода?

Всплывающая подсказка не выводится из ячейки slickgrid. Есть ли какое-либо свойство, доступное для ее вывода?

#html #jquery #slickgrid

#HTML #jquery #slickgrid

Вопрос:

По какой-то причине всплывающая подсказка не выходит из ячейки. Фрагмент CSS и HTML, который используется для заполнения всплывающей подсказки в slickgrid. Пожалуйста, помогите мне в этом.

 .tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}   
 <div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

Есть ли какое-либо свойство, доступное для ее вывода?

Комментарии:

1. Вам нужно поиграть с JavaScript, чтобы установить положение всплывающей подсказки в соответствии со смещением родительского тела.

2. у вас есть образец?

3. возможно, вы не сможете просто сделать это с помощью CSS, я не помню почему, но все содержится в ячейке div, вам может потребоваться использовать JS для создания всплывающей подсказки в теле, а затем переместить ее в координату ячейки. Например Slick.Editors.LongText , в этом примере в столбце «Описание» используется этот метод, поскольку он сталкивается с той же проблемой, и игра с z-index ним тоже не поможет.

Ответ №1:

Я просто играю с jQuery и показываю всплывающую подсказку как положение мыши.

 $(document).on('mousemove', '.tooltip-box', function(e){
  var wWidth = $(window).width();
  var wHeight = $(window).height();
  var mposeTop = e.originalEvent.y;
  var mposeLeft = e.originalEvent.x;
  if ((wWidth/2) > mposeLeft) {
    $(this).find('.tooltiptext').css({
      'top': mposeTop 'px',
      'left': mposeLeft 'px',
      'margin-left': '15px',
      'margin-top': '15px'
    });
  }
  if ((wWidth/2) < mposeLeft) {
    $(this).find('.tooltiptext').css({
      'top': mposeTop 'px',
      'left': (mposeLeft-130) 'px',
      'margin-top': '15px',
      'margin-left': 'auto',
      'margin-right': '15px'
    });
  }
  if ((wHeight/2) < mposeTop amp;amp; (wWidth/2) > mposeLeft) {
    $(this).find('.tooltiptext').css({
      'top': mposeTop 'px',
      'left': mposeLeft 'px',
      'margin-top': '-30px',
      'margin-left': '15px',
      'margin-right': 'auto'
    });
  }
  if ((wHeight/2) < mposeTop amp;amp; (wWidth/2) < mposeLeft) {
    $(this).find('.tooltiptext').css({
      'top': mposeTop 'px',
      'left': (mposeLeft-130) 'px',
      'margin-top': '-40px',
      'margin-left': 'auto',
      'margin-right': 'auto'
    });
  }
});  
 .tooltip-box {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  cursor: pointer;
}
.tooltip-box .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: fixed;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s;
}
.tooltip-box:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}   
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container py-2">
  <div class="row justify-content-between">
    <div class="col-6">
      <div class="tooltip-box">Hover over me
        <span class="tooltiptext">Tooltip text</span>
      </div>
    </div>
    <div class="col-6">
      <div class="tooltip-box">Hover over me2
        <span class="tooltiptext">Tooltip text</span>
      </div>
    </div>
  </div>
  <br><br><br><br>
  <hr>
  <br><br><br><br>
  <div class="row justify-content-between">
    <div class="col-6">
      <div class="tooltip-box">Hover over me3
        <span class="tooltiptext">Tooltip text</span>
      </div>
    </div>
    <div class="col-6">
      <div class="tooltip-box">Hover over me4
        <span class="tooltiptext">Tooltip text</span>
      </div>
    </div>
  </div>
</div>