Question

我在mouseover div上显示了工具提示-参见小提琴：https://jsfiddle.net/0egk47n9/34/

但是我不能为工具提示设置边距。以下内容似乎都不会对工具提示位置产生任何影响：

.pin .tooltip.left {
    margin-left: -50px !important;
    left: -50px !important;
}
.pin .tooltip.right {
    margin-right: 50px !important;
    right: 50px !important;
}

[已解决]

以下作品：

.pic .tooltip.right {
  margin-left: 20px !important;
}
.pic .tooltip.left {
  margin-left: -20px !important;
}

注意！两个工具提示边距都从左侧移动！参见小提琴：https://jsfiddle.net/0egk47n9/70/

Answer 1

我认为这段代码可以解决您的问题

$('.pic').on('mouseover', '.pin', function(e) {
  $(this).attr('title', 'zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz');
  $(this).tooltip({
    placement: function(context, source) {
      var position = $(source).position();

      if (position.left > 220) {
        return "left";
      }

      if (position.left < 220) {
        return "right";
      }
    }
  });
  $(this).tooltip('show');
});

.pic {
  width: 70%;
  height: 300px;
  border: 1px solid red;
}

.right {
  float: right;
}

.pin {
  width: 250px;
  border: 1px solid blue;
}

//For Bootstrap 3.3.7
.tooltip {
  display: block;
}

.fade.right.in,
.fade.left.in {
  top: 50px!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="pic">
  <div class="pin left" data-toggle="tooltip">
    xxxxxxxxxxxxxxxxxxxx
  </div>
  <div class="pin right in" data-toggle="tooltip">
    xxxxxxxxxxxxxxxxxxxx
  </div>
</div>

Answer 2

您在CSS选择器中缺少“ +”，因为工具提示的html附加在主div（具有“ pin”类的那个）之后（下方），而不是附加在主div内

因此，您的CSS应该是：

.pin + .tooltip.left {
    margin-left: -50px !important;
    left: -50px !important;
}
.pin + .tooltip.right {
    margin-right: 50px !important;
    right: 50px !important;
}

jQuery Bootstrap工具提示设置边距不起作用

2 个答案: