工具提示中的元素高度问题

Question

我创建了自己的tooltip，内容基于title属性和按元素offset().top和left的位置，但问题是工具提示获得了不需要的高度，我怎么能防止这个？为什么会有这个？ 。请看这个例子：

＆＃13;

＆＃13;

$('a').each(function() {
  if ($(this).attr('title')) {
    var title = $(this).attr('title');
    $(this).data('title', title).removeAttr('title');

    $(this).mouseover(function() {

      var leftPos = $(this).offset().left;
      var topPos = $(this).offset().top;

      if ($('.tooltip').length) {
        $('.tooltip').remove();
        $('body').append('<span class="tooltip">' + title + '</span>').fadeIn();
        $('.tooltip').css({
          top: topPos + 20,
          left: leftPos + 20
        });
      } else {
        $('body').append('<span class="tooltip">' + title + '</span>').fadeIn();
        $('.tooltip').css({
          top: topPos + 20,
          left: leftPos + 20
        });
      }
    });

    $(this).mouseleave(function() {
      $('.tooltip').fadeOut();
    });

  }
});

＆＃13;

.tooltip {
    position: absolute;
    background: #303030;
    font-size: 10px!important;
    bottom: -25px;
    color: white;
    padding: 3px 5px 3px 5px;
    white-space: nowrap;
    border-radius: 0 8px 8px;
    z-index: 999;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a title="Sampel title">Test</a>
<a title="Sampel title Sampel title Sampel title">Test2</a>
<a title="Sampel title Sampel title Sampel title Sampel title Sampel title">Test3</a>

＆＃13;

＆＃13;

＆＃13;

我不想设置一定的高度，并希望自动获得高度和宽度。

Answer 1

一切都是正确的，除了CSS中的bottom属性。结合顶部添加，这是导致问题的原因。所以你的CSS只需要：

.tooltip {
    position: absolute;
    background: #303030;
    font-size: 10px!important;
    color: white;
    padding: 3px 5px 3px 5px;
    white-space: nowrap;
    border-radius: 0 8px 8px;
    z-index: 999;
}

以下是更新后的示例：

$('a').each(function() {
  if ($(this).attr('title')) {
    var title = $(this).attr('title');
    $(this).data('title', title).removeAttr('title');

    $(this).mouseover(function() {

      var leftPos = $(this).offset().left;
      var topPos = $(this).offset().top;

      if ($('.tooltip').length) {
        $('.tooltip').remove();
        $('body').append('<span class="tooltip">' + title + '</span>').fadeIn();
        $('.tooltip').css({
          top: topPos + 20,
          left: leftPos + 20
        });
      } else {
        $('body').append('<span class="tooltip">' + title + '</span>').fadeIn();
        $('.tooltip').css({
          top: topPos + 20,
          left: leftPos + 20
        });
      }
    });

    $(this).mouseleave(function() {
      $('.tooltip').fadeOut();
    });

  }
});

.tooltip {
    position: absolute;
    background: #303030;
    font-size: 10px!important;
    color: white;
    padding: 3px 5px 3px 5px;
    white-space: nowrap;
    border-radius: 0 8px 8px;
    z-index: 999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a title="Sampel title">Test</a>
<a title="Sampel title Sampel title Sampel title">Test2</a>
<a title="Sampel title Sampel title Sampel title Sampel title Sampel title">Test3</a>

Answer 2

这是因为您为bottom: -25px div设置了.tooltip，然后将其垂直拉伸：

＆＃13;

＆＃13;

$('a').each(function() {
  if ($(this).attr('title')) {
    var title = $(this).attr('title');
    $(this).data('title', title).removeAttr('title');

    $(this).mouseover(function() {

      var leftPos = $(this).offset().left;
      var topPos = $(this).offset().top;

      if ($('.tooltip').length) {
        $('.tooltip').remove();
        $('body').append('<span class="tooltip">' + title + '</span>').fadeIn();
        $('.tooltip').css({
          top: topPos + 20,
          left: leftPos + 20
        });
      } else {
        $('body').append('<span class="tooltip">' + title + '</span>').fadeIn();
        $('.tooltip').css({
          top: topPos + 20,
          left: leftPos + 20
        });
      }
    });

    $(this).mouseleave(function() {
      $('.tooltip').fadeOut();
    });

  }
});

＆＃13;

.tooltip {
    position: absolute;
    background: #303030;
    font-size: 10px!important;
    /*bottom: -25px;*/
    color: white;
    padding: 3px 5px 3px 5px;
    white-space: nowrap;
    border-radius: 0 8px 8px;
    z-index: 999;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a title="Sampel title">Test</a>
<a title="Sampel title Sampel title Sampel title">Test2</a>
<a title="Sampel title Sampel title Sampel title Sampel title Sampel title">Test3</a>

＆＃13;

＆＃13;

＆＃13;