使用javascript更改显示样式后，工具提示不起作用

我有一个带有工具提示的html元素

<div class="parent">
    <div name="test_buttons" href="#" data-toggle="tooltip" data-placement="bottom" title="test" style="display:none;">
        test
    </div>
</div>

---

但这似乎不起作用。如果我删除display=none语句，效果很好。您知道如何在这种情况下使用工具提示吗？

下面是一个工作示例：

您需要确保为父元素指定宽度和高度，以便鼠标悬停

---

还要确保您拥有所有的依赖项，包括jQuery和jQuery UI的css和js。

您好，谢谢您的评论。。。我必须详细说明一下这个问题。。。事实上，如果我删除上面的mouseout语句，这一切都会起作用

$(".parent").mouseover(function(){
    var buttons = this.querySelectorAll('[name=test_buttons]');
    buttons[0].style.display = "inline";
    $('[data-toggle="tooltip"]').tooltip({trigger : 'hover'}); 
});

$(".parent").mouseout(function(){
    var buttons = this.querySelectorAll('[name=test_buttons]');
    buttons[0].style.display = "none";
});

<div class="parent" style="width:150px;height:150px;background-color:red;">