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

Question

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

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

页面加载时不显示此 html 对象(display = 'none')。我想用 javascript 更改鼠标悬停时的设置

$(".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";
});

但这似乎不起作用。如果我删除 display="none"语句，它就可以正常工作。知道如何让工具提示在这种情况下工作吗？

Answer 1

这是一个工作示例:https://jsfiddle.net/ccg2kbbx/

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

您需要确保为父元素指定宽度和高度，以便鼠标悬停在任何内容上。

还要确保您拥有 jQuery 和 jQuery UI 的所有依赖项(css 和 js)。