Bootstrap Tooltip Dynamic value Dependant on a filled out required or not

Question

Hi I'm running my head in to a wall.

I am trying to make a javascript/jquery event that detects when my mouse is over a button. when the mouse is over the button I want a tooltip containing the required message from the input that still needs to be filled out. I want it to only be the last required message and I want the message to change until there are no more required to fill out.

This is what I have tried so far.

my Razor 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

and my script looks like this

   <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>

So I am at a loss where I went wrong here. a pointer to the right direction or a little help here would be appreciated, Even telling me if I am Far off my mark or very close to would also be considered a big help.

with the help of CodeThing I've produced a working example of what I wanted to do.

 $(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');
        });

However this only works in Firefox. I really need this also to work in both Edge and Chrome.

CodeThing · Accepted Answer · 2018-08-30T09:45:49.413

1

In that case, try the below code and add data-html="true" attribute to send button. It display all blank fields tooltip on new line in send buttons tooltip.

$(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');
});

edited Aug 30 '18 at 09:45

answered Aug 30 '18 at 08:16

CodeThing

2,580
2
12
25

The thing is I'm trying to pick up the individual 'input[data-val-required]' and put their title in the '#Send' button elements tooltip when 'input[data-val-required]' are not filled out. and hide the tooltip entirely when all required input fields are filled out. what I can read from yours, it just show a static title of the button when I hover over it ? I will try your approach thou just in case I misunderstood what it does. – Helbo Aug 30 '18 at 08:53
it works exactly how I imagined it but not on edge or chrome only in firefox – Helbo Aug 30 '18 at 10:36
@Helbo Then it might be another problem i guess. I just checked the same code with dummy html and it worked fine on chrome, edge and FF. Do you see any error in console? Is there any other event attached to this button? – CodeThing Aug 31 '18 at 05:52
yes it is a submit button so there are a few things attached to the button for instance a gray out/disabled event as long as the other stuff is not filled out. – Helbo Aug 31 '18 at 06:00
yea I've narrowed it down to not working when I enable a line like this document.getElementById("Send").disabled = true; – Helbo Aug 31 '18 at 06:08
@Helbo That's the problem, it doesn't work on disabled elements. Try this https://stackoverflow.com/questions/13311574/how-to-enable-bootstrap-tooltip-on-disabled-button. Hope it helps. – CodeThing Aug 31 '18 at 06:11

Bootstrap Tooltip Dynamic value Dependant on a filled out required or not

1 Answers1