Question

所以我正致力于创建工具提示功能。基本上它会将一个带有工具提示文本的div附加到您单击的元素上。但是，我如何始终将此元素放在我点击广告的元素上方？

＆＃13;

$(document).ready(function() {
  $('.tooltipTarget').click(function() {
    var title = $(this).data('tooltip');
    if (!$('p.tooltip').hasClass('active')) {
      $('<p class="tooltip active"></p>')
        .text(title)
        .appendTo($(this));

      $('.tooltip').addClass('test');
      $(document).on('click', function(e) {
        if (e.target != $('.tooltipTarget')[0]) {
          $('.tooltipTarget').trigger('click');
        }
      });
    } else {
      $(document).off('click');
      $('p.tooltip.active').fadeOut(250, function() {
        $(this).remove();
      });
    }
  });
});

＆＃13;

.tooltip {
  margin-top: -45px;
  opacity: 1;
  transition: 0.3s ease-in-out;
  position: absolute;
  border-radius: 1px;
  color: #767676;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  background: #f7f7f7;
  padding: 10px;
  font-size: 12px;
  text-align: left;
  z-index: 10;
  max-width: 250px;
  &.active {
    opacity: 1;
  }
}
.tooltip::before {
  content: '';
  display: inline-block;
  height: 0;
  width: 0;
  position: absolute;
  z-index: 10;
  bottom: -14px;
  right: 50%;
  right: calc(50% - 7px);
  border-left: solid 7px transparent;
  border-right: solid 7px transparent;
  border-bottom: solid 7px transparent;
  border-top: solid 7px #f7f7f7;
}
.tooltip::after {
  content: '';
  display: inline-block;
  height: 0;
  width: 0;
  position: absolute;
  z-index: 9;
  bottom: -15px;
  right: 50%;
  right: calc(50% - 7px);
  border-left: solid 7px transparent;
  border-right: solid 7px transparent;
  border-bottom: solid 7px transparent;
  border-top: solid 7px rgba(0, 0, 0, 0.2);
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>CSS3 tooltip</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
  <script type="text/javascript" src="script.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">



</head>

<body>

  <button style="margin: 200px;" data-tooltip="This is a tooltipThis is a ltipThis is a tooltipThis is a tooltipThis is a tooltipThis is a tooltipThis is a tooltipThis is a tooltipThis is a tooltipThis is a tootooltipThis is a tooltipThis is a tooltipThis is a tooltipThis is a tooltipThis is a tooltipThis is a tooltipThis is a tooltipThis is his is a tooltipThis is a tooltipThis is a tooltipThis is a tooltipThis is his is a tooltipThis is a tooltipThis is a tooltipThis is a tooltipThis is his is a tooltipThis is a tooltipThis is a tooltipThistooltipThis is a tooltip"
  class="tooltipTarget">orempaks[djo[psad</button>

</body>

</html>

＆＃13;

P.S。我不想使用基本的HTML标题功能。

Answer 1

这对你有用......

button.tooltipTarget {
position: relative;
}

p.tooltip.active {
position: absolute; 
bottom: 100%; 
left: 50%; 
width: 400px;
transform: translateX(-50%);
}

Answer 2

您可以相对于容器元素定义单击事件的确切位置，如果这会有帮助......

您可以点击鼠标点击事件的点击元素offset，PageX的{{1}}，并计算工具提示的开始位置：

PageY

因此，您可以通过此计算设置工具提示的$('#container').click(function(e) { var offset = $(this).offset(); var top = e.pageY - offset.top; var left = e.pageX - offset.left; alert('OFFSET: ' + top + ', ' + left); });和top。

See example

在点击位置向容器添加内容： Example 2 （使用大多数css）

Answer 3

请尝试这一个：

css代码：

button.tooltipTarget {
position: relative;
}
p.tooltip.active {
position: absolute; 
bottom: 100%; 
left: 50%; 
width: 400px;

transform: translateX(-50%);
}
.tooltip {
  margin-top: -45px;
  opacity: 1;
  transition: 0.3s ease-in-out;
  position: absolute;
  border-radius: 1px;
  color: #767676;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  background: #f7f7f7;
  padding: 10px;
  font-size: 12px;
  text-align: left;
  z-index: 10;
  max-width: 250px;
  &.active {
    opacity: 1;
  }
}
.tooltip::before {
  content: '';
  display: inline-block;
  height: 0;
  width: 0;
  position: absolute;
  z-index: 10;
  bottom: -14px;
  right: 50%;
  right: calc(50% - 7px);
  border-left: solid 7px transparent;
  border-right: solid 7px transparent;
  border-bottom: solid 7px transparent;
  border-top: solid 7px #f7f7f7;
}
.tooltip::after {
  content: '';
  display: inline-block;
  height: 0;
  width: 0;
  position: absolute;
  z-index: 9;
  bottom: -15px;
  right: 50%;
  right: calc(50% - 7px);
  border-left: solid 7px transparent;
  border-right: solid 7px transparent;
  border-bottom: solid 7px transparent;
  border-top: solid 7px rgba(0, 0, 0, 0.2);
}

DEMO

如何正确定位附加元素的绝对位置？

3 个答案: