Animated Bootstrap tooltip - problems with transform property

Question

I use this solution to animate Bootstrap tooltip, but there is a problem. I would like to use scale transform on tooltip. When I hover over the button for the very first time it is working good, but then tooltip moves to different position. I think it is related to Bootstrap JS positioning of the tooltip (initially tooltip has scale 0 so dimensions of the tooltip are 0x0px and probably this is the reason of my issue).

HTML:

<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>

CSS:

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

JS:

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

CODEPEN

Answer 1

I think I resolved my problem:

HTML:

<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>

CSS:

@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;
}

JS:

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

CODEPEN