Positioning of div with jquery

Asked

Viewed 234 times

1

Well, with the help of some people here in the stack I am modifying my tooltip system, it is almost ready, however I am having a problem.

When I use a very large text in the class 'masterTooltip-left' the tooltip bug, it does not align right and therefore is not displayed. someone knows how to solve this?

$(document).ready(function() {

  $('.masterTooltip-right').hover(function() {

    var title = $(this).attr('title');
    $(this).data('tipText', title).removeAttr('title');
    $('<p class="tooltip-right"></p>').html(title).appendTo('body').fadeIn('fast');
  }, function() {
    $(this).attr('title', $(this).data('tipText'));
    $('.tooltip-right').hide();
  }).mousemove(function(e) {

    // Posição
    var mousex = e.pageX + 25;
    var mousey = e.pageY + -25;
    $('.tooltip-right').css({
      top: mousey,
      left: mousex
    });
  });


  $('.masterTooltip-left').hover(function() {

    var title = $(this).attr('title');
    $(this).data('tipText', title).removeAttr('title');
    $('<p class="tooltip-left"></p>').html(title).appendTo('body').fadeIn('fast');
  }, function() {
    $(this).attr('title', $(this).data('tipText'));
    $('.tooltip-left').hide();
  }).mousemove(function(e) {

    // Posição
    var mousex = e.pageX - 150;
    var mousey = e.pageY + -25;
    $('.tooltip-left').css({
      top: mousey,
      left: mousex
    });
  });
});
.tooltip-right, .tooltip-left {
    display: none;
    position: absolute;
    border: 1px solid #616161;
    background-color: #323232;
    border-radius: 4px;
    padding: 10px;
    color: #FFFFFF;
}
.tooltip-right::after {
    position: absolute;
    content: '';
    left: -20px;
    top: 3px;
    border: 10px solid transparent;
    border-right-color: #323232;
}
.tooltip-left:after {
    position: absolute;
    content: '';
    right: -10px;
    top: 3px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #323232;
}





.right {
  float: right;
}

.w100 {
  width: 100px;
  background-color: #0091FF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<div class='masterTooltip-right w100' title="erro">MOUSE</div>

<div class='masterTooltip-left right w100' title="TEXTO AQUI">MOUSE</div>
<br><br><br>
<div class='masterTooltip-left right w100' title="sssssssssssssssssssss">BUG</div>

javascript jquery

  • the bug is that the tooltip is "disappearing and appearing"? if it is, the simplest way to solve this is instead of you positioning the tooltip on the screen, put the tooltip as the child of the element that fired. so the "mouseout" will not happen if the mouse enters the tooltip.

  • He keeps disappearing because he’s not in the right position. tooltip-right works, tooltip-left does not, because when the text is large it is not within 10px of the cursor. get it? the structure I do not want to move, so it is very simple

  • so that’s exactly what I said.. actually it some pq the cursor enters inside the tooltip and this makes it exit the shooting element, so it closes.

  • um, would you change the code I posted with your solution?

2 answers

1

you can apply a css Transform to compensate for the variable width.

html:

<div class="div1">
  <div class="masterTooltip w100" data-label="erro">MOUSE</div>
</div>

<div class="div2">
  <div class="masterTooltip right w100" data-label="TEXTO AQUI">MOUSE</div>
  <div class="masterTooltip right w100" data-label="sssssssssssssssssssss">BUG</div>
</div>

css:

.tooltip-left {
  transform: translateX(-100%);
}

.div1 {
  float: left;
  width: 50%;
}

.div2 {
  float: left;
  width: 50%;
  text-align: right;
}

.right {
  margin-left: auto;
  margin-right: 0;
}

.w100 {
  cursor: pointer;
  width: 100px;
  background-color: #0091FF;
  margin-bottom: 25px;
}

javascript:

$(document).ready(function() {

  var w = $('body').width();
  var h = $('body').height();

  $('.masterTooltip').hover(function(e) {
    var mouse = {x: e.clientX, y: e.clientY};
    var t = e.target;
    var title = $(t).attr('data-label');
    if (mouse.x > w / 2) {
      $('<p class="tooltip-left"></p>').html(title).appendTo('body').fadeIn('fast');
    }
    else {
      $('<p class="tooltip-right"></p>').html(title).appendTo('body').fadeIn('fast');
    }
  },
  function() {
    $('.tooltip-left').hide();
    $('.tooltip-right').hide();
  }).mousemove(function(e) {
    var mouse = {x: e.pageX, y: e.pageY};
    $('.tooltip-left').css({
      top: mouse.y - 25,
      left: mouse.x - 25,
    });
    $('.tooltip-right').css({
      top: mouse.y - 25,
      left: mouse.x + 25,
    });
  });
});

1


I made a change in javascript has to take a good look at the calculations to be perfect, but basically I am calculating based on the size of the word and if it is capitalized or minuscula

$(document).ready(function() {

  $('.masterTooltip-right').hover(function() {

    var title = $(this).attr('title');
    $(this).data('tipText', title).removeAttr('title');
    $('<p class="tooltip-right"></p>').html(title).appendTo('body').fadeIn('fast');
  }, function() {
    $(this).attr('title', $(this).data('tipText'));
    $('.tooltip-right').hide();
  }).mousemove(function(e) {

    $('.tooltip-right').each(function() {
      var mousex = 0;
      var mousey = e.pageY + -25;
      if ($(this).text()[0] == $(this).text()[0].toUpperCase()) {
        mousex = (e.pageX -10) + ($(this).text().length * 10)

      } else {
        mousex = (e.pageX) + ($(this).text().length * 7)
      }
      $(this).css({
        top: mousey,
        left: mousex
      })
    });
  });


  $('.masterTooltip-left').hover(function() {

    var title = $(this).attr('title');
    $(this).data('tipText', title).removeAttr('title');
    $('<p class="tooltip-left"></p>').html(title).appendTo('body').fadeIn('fast');
  }, function() {
    $(this).attr('title', $(this).data('tipText'));
    $('.tooltip-left').hide();
  }).mousemove(function(e) {

    // Posição
      $('.tooltip-left').each(function() {
      var mousex = 0;
      var mousey = e.pageY + -25;
      if ($(this).text()[0] == $(this).text()[0].toUpperCase()) {
        mousex = (e.pageX - 40) - ($(this).text().length * 10)

      } else {
        mousex = (e.pageX - 40) - ($(this).text().length * 7)
      }
      $(this).css({
        top: mousey,
        left: mousex
      })
    });
  });
});
.tooltip-right,
.tooltip-left {
  display: none;
  position: absolute;
  border: 1px solid #616161;
  background-color: #323232;
  border-radius: 4px;
  padding: 10px;
  color: #FFFFFF;
}
.tooltip-right::after {
  position: absolute;
  content: '';
  left: -20px;
  top: 3px;
  border: 10px solid transparent;
  border-right-color: #323232;
}
.tooltip-left:after {
  position: absolute;
  content: '';
  right: -10px;
  top: 3px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #323232;
}
.right {
  float: right;
}
.w100 {
  width: 100px;
  background-color: #0091FF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<div class='masterTooltip-right w100' title="ERRO">MOUSE</div>


<br>
<br>
<br>
<div class='masterTooltip-right w100' title="erro">MOUSE</div>



<div class='masterTooltip-left right w100' title="t">MOUSE</div>
<br>
<br>
<br>
<div class='masterTooltip-left right w100' title="ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss">BUG</div>

  • 1

    Okay, I did it right. I’m putting together a design project for small systems, I put your name in the contributions. Vlw https://github.com/hugovborges/HS-Design

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.