Всплывающая подсказка начальной загрузки в теге метки модальной формы не работает

#javascript #html #bootstrap-4

#javascript #HTML #bootstrap-4

Вопрос:

Я хочу, чтобы текст внутри метки имел связанную с ним всплывающую подсказку при наведении курсора мыши. Я не уверен, что проблема вызвана тегом label, но я знаю, что если я перейду к всплывающей подсказке за пределами метки, она сработает. Вот фрагмент кода:

 <div class="form-group">
    <label class="col-sm-3" style="margin-left: 2%;" 
    for="endpointname">Name: 
    <i class="fa fa-info-circle" data-toggle="tooltip" title="The endpoint name should reflect the name of the application"></i></label> 
    <div class="col-sm-4" style="z-index: 999;">
       <input type="text" class="form-control" id="endptname"
            name="endptname" onchange="endptNameEntered()"
            placeholder="Enter name" />
    </div>
</div>

Я видел другие сообщения о добавлении функции javascript для включения всплывающих подсказок, но всплывающие подсказки, расположенные в другом месте страницы, работают, и, как я уже упоминал, это работает в этом режиме, если я просто перемещаю всплывающую подсказку за пределы метки. Я также удалил z-индекс на случай, если это было проблемой, но без радости.

Извините, если это очевидно / уже ответил, но я не понимаю. Спасибо.

1. Пожалуйста, обновите свой код, чтобы включить полный, воспроизводимый пример. Вы должны показать разметку для всех родительских элементов вашего примера, точную версию ресурсов начальной загрузки и то, как вы их реализуете, а также любые дополнительные css или скрипты, влияющие на элемент или любого из его предков.

Ответ №1:

Как указано в документах:

Всплывающие подсказки доступны по соображениям производительности, поэтому вы должны инициализировать их самостоятельно.

Добавьте следующий фрагмент javascript в конец вашей страницы после включения bootstrap.js а перед закрывающим </body> тегом и ваш код должен работать так, как ожидалось:

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

См. скрипку.

1. По какой-то причине у меня это не работает. Как я уже сказал, всплывающие подсказки действительно работают с модальным внешним тегом label. Когда я добавляю функцию, о которой вы упомянули, всплывающие подсказки на странице, но не в модальном режиме, должны быть отклонены. Но тот, что внутри метки, по-прежнему не отображается. Я вижу, что это работает в вашем примере, поэтому у меня есть какой-то конфликт или что-то в моем модальном. Я буду продолжать пытаться .

2. @Brutus присутствует ли содержимое модели в DOM при загрузке страницы или оно добавляется позже? Для элементов всплывающей подсказки, добавленных после загрузки страницы, вам нужно будет снова вызвать описанную выше функцию.

3. Он присутствует при загрузке страницы. Можете ли вы придумать альтернативы всплывающей подсказке, которая предоставляет ту же функциональность? Я даже попытался изменить всплывающую подсказку на кнопку, чтобы я мог открывать модальный объект при нажатии на него, но пока кнопка находилась внутри тегов label, это не сработало. Спасибо.