时间戳

首页 > 解决方案 > 工具提示不是从 slickgrid 单元格中出来的。有什么财产可以拿出来吗？

html - 工具提示不是从 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>

有什么财产可以拿出来吗？

标签： htmljqueryslickgrid

解决方案

我只是玩 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 && (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 && (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>

推荐阅读