Tooltip is not coming out of slickgrid cell. Is there any property available to bring it out?

user_10691072 0
Viewed 158

For some reason tooltip is not coming out of the cell. CSS and HTML snippet which is used to populate tooltip in slickgrid. Please help me on this.

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

Is there any property available to bring it out?

slickgrid html jquery
1 Answers

I just play with jQuery and show tooltip as mouse position.

$(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>

user_70529270
Related