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

是否有任何财产可以将其推出？

解决方法

我只是玩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','margin-top': '-30px','margin-right': 'auto'
    });
  }
  if ((wHeight/2) < mposeTop && (wWidth/2) < mposeLeft) {
    $(this).find('.tooltiptext').css({
      'top': mposeTop+'px','margin-top': '-40px','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>