javascript - jQuery 工具提示仅在 HTML 代码中，但不可见

Question

我正在尝试使用 jQuery 和工具提示在我的网站上获得一些好看的帮助按钮。

但是，当您搜索元素时它们会出现，但不会显示。

这是一些代码：

<div class="card-header">
    <h5 style="float: left">Eckdaten</h5>
    <button id="help" type="button" class="btn btn-outline-secondary" 
            data-toggle="tooltip" data-placement="left" 
            title="TestTest" style="float: right; padding-left: 8px; padding-right: 8px">
        <i class="fas fa-life-ring"> <Hilfe
    </button>
</div>

在脚本部分：

$(document).ready(function () {
    $('[data-toggle="tooltip"]').tooltip();
});

src files:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.js"> 
</script>

每当悬停时，html 代码中都会出现一个工具提示，但实际的框没有显示。

非常感谢你的帮助！

标签： javascriptbootstrap-4tooltip

Answer 1

您那里的 HTML 结构无效。您的字体真棒图标需要关闭。

替换<Hilfe为关闭</i>将解决问题。

https://jsfiddle.net/davidliang2008/2dqa1fvu/4/