Bootstrap Tooltip Динамическое значение Зависит от того, заполняется обязательно или нет

Question

Привет. Я вбиваю голову в стену.

Я пытаюсь создать событие javascript / jquery, которое определяет, когда моя мышь находится над кнопкой. когда мышь находится над кнопкой, я хочу всплывающую подсказку, содержащую требуемое сообщение от ввода, которое еще нужно заполнить. Я хочу, чтобы это было только последнее обязательное сообщение, и я хочу, чтобы оно менялось до тех пор, пока больше не будет необходимости заполнять его.

Это то, что я пробовал до сих пор.

моя бритва cshtml

...Irrelevant html code
 <div class="form-group form-group-sm col-sm-6">
                    <div class="row">
                        <div class="col-sm-1"></div>
                        <div class="col-sm-4">
                            @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "col-form-label col-md-12" })
                        </div>

                        <div class="col-sm-6">
                            @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control",title = Global.ToolTipName, data_toggle = "tooltip" } })
                            @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
                        </div>
                    </div>
                </div>
                  <div class="form-group form-group-sm col-sm-6">
                    <div class="row">
                        <div class="col-sm-1"></div>
                        <div class="col-sm-4">
                            @Html.LabelFor(model => model.Phone, htmlAttributes: new { @class = "col-form-label col-md-12" })
                        </div>
                        <div class="col-sm-6">
                            @Html.EditorFor(model => model.Phone, new { htmlAttributes = new { @class = "form-control", title = Global.ToolTipPhone, data_toggle = "tooltip" } })
                            @Html.ValidationMessageFor(model => model.Phone, "", new { @class = "text-danger" })
                        </div>
                    </div>
                </div>
                 <div class="form-group form-group-sm col-sm-12">
                    <div class="row">
                        <div class="col-sm-12">
                            <input id="Send" type="submit" value="@Global.btnSend" title = "Not Implemented Yet!" data_toggle = "tooltip" class="btn btn-default" />
                        </div>
                    </div>
                </div>

...Irrelevant html code

и мой скрипт выглядит так

   <script type="text/javascript">
   $(document).on('mouseenter', '#Send', function () {
           var allinput = $('input[data-val-required]').get();
           allinput.forEach(item => this.attr('data-original-title', item.title));//<--- tried this doesn't seem to work.
           //allinput.forEach(item => this.attr('data-original-title', item.title).tooltip('fixTitle').tooltip('show')); <--- and tried this didn't work either
           //allinput.forEach(item => this.attr('title', item.title).tooltip('fixTitle').tooltip('show'));<--- then I tried this didn't work either
           $(this).tooltip('show');
        });

        $(document).on('mouseleave', '#Send', function () {
            $(this).tooltip('hide');
        });
        </script>

Так что я в растерянности, когда я ошибся здесь. Был бы признателен указатель в правильном направлении или небольшая помощь, даже если бы мне сказали, что я далеко от своей отметки или очень близок, это тоже может помочь.

с помощью CodeThing я создал рабочий пример того, что я хотел сделать.

 $(document).on('mouseenter', '#Send', function () {
            var allinput = $('input[data-val-required]').get();
            var lastval = '';
            $.each(allinput, function () {
                if ($(this).val() == '') {
                    var forName = this.id;
                    var closestName = "label[for='" + forName + "']";
                    lastval += $(this.parentNode.parentNode).find(closestName).text() +", ";
                }
            });
            lastval = "Need to fill out these fields: " + lastval
            $(this).attr('title', lastval).tooltip('fixTitle').tooltip('show');
        });

        $(document).on('mouseleave', '#Send', function () {
            $(this).tooltip('hide');
        });

Однако это работает только в Firefox. Мне действительно нужно это также для работы в Edge и Chrome.

Answer 1

В этом случае попробуйте приведенный ниже код и добавьте data-html = "true" атрибут для кнопки отправки. В новой строке всплывающей подсказки для кнопок отправки отображаются все пустые поля.

$(document).on('mouseenter', '#Send', function () {
    var allinput = $('input[data-val-required]').get();
    var lastval = '';
    $.each(allinput, function() {
        if($(this).val() == '') lastval += $(this).attr('title')+'<br />';
    });
    $(this).attr('title', lastval).tooltip('fixTitle').tooltip('show');
});

$(document).on('mouseleave', '#Send', function () {
    $(this).tooltip('hide');
});