Twitter bootstrap 动画引导工具提示-变换属性存在问题

我使用解决方案为引导工具提示设置动画，但存在一个问题。我想在工具提示上使用缩放变换。当我第一次将鼠标悬停在按钮上时，它工作正常，但随后工具提示移动到不同的位置。我认为这与工具提示的引导JS定位有关（最初工具提示的刻度为0，因此工具提示的尺寸为0x0px，可能这就是我的问题所在）

HTML:

JS:

---

我想我解决了我的问题：

HTML:

JS:

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

@keyframes scale {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
.scale {
  animation: scale 200ms cubic-bezier(0, 0, 0.2, 1);
}

$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="tooltip"]').on('shown.bs.tooltip', function () {
  $('.tooltip').addClass('scale');
});

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

@keyframes scale {
  0% {
    transform: scale(1);
    opacity: 0;
  }
  1% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.scale {
  animation: scale 200ms cubic-bezier(0, 0, 0.2, 1);
}
.tooltip.fade {
  transition: none;
  opacity: 0;
}

$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="tooltip"]').on('shown.bs.tooltip', function () {
  $('.tooltip').addClass('scale').css('opacity', 1);
});