Подсказки 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. Ваш шрифт потрясающий значок должен быть закрыт.

Замените <Hilfe на закрытое </i>, чтобы исправить проблему.

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