Javascript 引导工具提示动态值取决于是否需要填写
嗨,我的头撞到墙上了 我正在尝试创建一个javascript/jquery事件,用于检测鼠标何时位于按钮上方。当鼠标放在按钮上时,我想要一个工具提示,其中包含仍然需要填写的输入所需的消息。我希望它只是最后一个必需的消息,我希望消息更改,直到不再需要填写 这就是我迄今为止所尝试的 我的剃须刀Javascript 引导工具提示动态值取决于是否需要填写,javascript,jquery,razor,bootstrap-4,Javascript,Jquery,Razor,Bootstrap 4,嗨,我的头撞到墙上了 我正在尝试创建一个javascript/jquery事件,用于检测鼠标何时位于按钮上方。当鼠标放在按钮上时,我想要一个工具提示,其中包含仍然需要填写的输入所需的消息。我希望它只是最后一个必需的消息,我希望消息更改,直到不再需要填写 这就是我迄今为止所尝试的 我的剃须刀 ...Irrelevant html code <div class="form-group form-group-sm col-sm-6"> <d
...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
然而,这只适用于Firefox。我真的需要这也工作在边缘和铬 在这种情况下,请尝试下面的代码并将数据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');
});
问题是,我正在尝试选择单个“input[data val required]”,并在未填写“input[data val required]”时将其标题放在“Send”按钮元素工具提示中。并在填写完所有必需的输入字段后完全隐藏工具提示。我能从你的文章中读到的是,当我把鼠标悬停在按钮上时,它只是显示按钮的静态标题?我会尝试你的方法,以防万一我误解了它的作用。它完全按照我的想象工作,但不是在边缘或铬只有在firefox@Helbo我想这可能是另一个问题。我刚刚用虚拟html检查了相同的代码,它在chrome、edge和FF上运行良好。您在控制台中看到任何错误吗?是否有任何其他事件附加到此按钮?是的,它是一个提交按钮,因此按钮上附加了一些内容,例如灰色/禁用事件,只要其他内容未填写。是的,我已将其缩小为在启用此文档之类的行时不起作用。getElementByIdSend.disabled=true;
$(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');
});
$(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');
});