Div positioning with jquery

Question

Div positioning with jquery

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

Well, with the help of some people here in the stack I'm modifying my tooltip system, it's almost ready, but I'm having a problem.

When I use very large text in the 'masterTooltip-left' class of the tooltip bug, it does not line up correctly and therefore is not displayed. does anyone know 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><divclass='masterTooltip-rightw100'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

asked by anonymous 06.12.2016 / 19:10

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,
    });
  });
});

07.12.2016 / 01:06

Center div within scroll Layout with listview doubts

score 1 · Accepted Answer

I made a change in the javascript has to give an increase in the calculations to be perfect, but basically to calculate based on the size of the word and whether it is uppercase or lowercase

$(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><divclass='masterTooltip-rightw100'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>