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

【问题标题】：tooltip does not work after change of display style with javascript使用 javascript 更改显示样式后工具提示不起作用
【发布时间】：2017-11-27 06:08:32
【问题描述】：

我有一个带有工具提示的 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" 语句，它工作正常。知道如何在这种情况下使工具提示起作用吗？

【问题讨论】：

标签： javascript html tooltip

【解决方案1】：

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

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

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

还要确保你包含了 jQuery 和 jQuery UI 的所有依赖项（css 和 js）。

【讨论】：

嗨，感谢您的评论...我必须稍微说明一下问题...事实上，如果我删除 mouseout 语句，这一切都有效，见上文