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 代码中，但不会显示实际的框。

非常感谢您的帮助！

Answer 1

那里的 HTML 结构无效。您的 font awesome 图标需要关闭。

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

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

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

jQuery Tooltips only in HTML Code but not visible

javascript

tooltip

bootstrap-4