使用mouseover事件显示工具提示会导致闪烁的工具提示

Question

我使用mouseover事件显示我的按钮的工具提示，因为我有一个单页Web应用程序，其中按钮的总数动态变化。

按钮定义如下

<button type="button" class="btn btn-primary btn-xs mapButton" data-toggle="tooltip" title="message">
    <span class="glyphicon glyphicon-map-marker"></span> 
       Map
</button>

我用下面的j显示和隐藏工具提示。

$(document).on('mouseover', '[data-toggle="tooltip"]', function () {
    console.log("show tooltip");
    $(this).tooltip('show');
});

$(document).on('click', '[data-toggle="tooltip"]', function () {
    console.log("hide tooltip");
    $(this).tooltip('hide');
});

$(document).on('mouseout', '[data-toggle="tooltip"]', function () {
    console.log("hide tooltip");
    $(this).tooltip('hide');
});

每当我用鼠标移动按钮时，在鼠标移动按钮的过程中，您会在控制台/输出中多次发现show tooltip和hide tooltip。这有时导致闪烁的工具提示。为什么会这样，我该如何避免这种情况？