Проблема с всплывающими окнами Bootstrap, появляющимися в верхней части экрана после активации определенного всплывающего окна - PullRequest
Новая
       18

Проблема с всплывающими окнами Bootstrap, появляющимися в верхней части экрана после активации определенного всплывающего окна

0 голосов
/ 08 мая 2019

У меня есть форма с полями, которые имеют? Значок SVG, который при наведении курсора показывает всплывающее окно Bootstrap 3 с сообщением, разъясняющим информацию, которая должна быть отправлена. Всего их около 9.

Я использую следующую функцию JQuery, 

$(document).ready(function () {
                    $('[data-toggle="popover"]').popover({
                        placement: 'top',
                        container: 'body'
                    });
                });

и в HTML мои значки кодируются таким образом .. 

<div class="form-group">
                        @Html.LabelFor(x => x.Misc_Info)<svg class="icon-ques-blue" data-container="body" data-placement="top" data-toggle="popover" data-trigger="hover" data-html="true" data-content="A message here."><use xlink:href="~/Content/images/sprite.svg#icon-help-with-circle" style="pointer-events: none"></use> </svg>
                        @Html.TextAreaFor(x => x.Misc_Info, new { @class = "form-control" })
                    </div>

Всплывающие окна для первых 7 значков работают нормально, они появляются рядом с соответствующим значком. Но когда вы переходите к следующему разделу формы с двумя последними значками, когда всплывающие подсказки, их всплывающие окна прыгают на верх экрана, вне поля зрения. WTF. И затем, это приводит к тому, что на более ранних иконках всплывающие окна тоже переходят наверх (несмотря на то, что они работают нормально при первой загрузке сайта). Кто-нибудь знает, что происходит? HTML-код одинаков для всех 9 значков, поэтому я озадачен тем, что вызвало это.

...