我有一个输入,当用户第一次加载表单时,它会预先填充一个值。我希望这个工具提示能够持续存在,直到用户专注于这一领域。我在整个页面上使用相同的工具提示,并且只需要在页面加载时显示这 1 个工具提示,直到用户关注其下方的输入。然后它要么消失,要么表现得像其他人一样。有办法做到这一点吗?
HTML:
<label for="vehiclePrice" class="form-control-label vpl">Vehicle Price <a href="#" title="Customize your vehicle price." class="jqTooltip">tooltip<img src="assets/img/glyphicons3/comment.png" width="10" height="10" /></a></label>
<input type="text" class="form-control" name="vehiclePrice" id="vehiclePrice" placeholder="$25592 Suggested MSRP" onkeypress="return isNumberKey(event)" value="25592 Suggested MSRP" required />
JS:
$(function() {
$(".jqTooltip").tooltip({
track: true,
position: {
my: "center bottom-20",
at: "center top",
using: function( position, feedback ) {
$( this ).css( position );
$( "<div>" )
.addClass( "arrow" )
.addClass( feedback.vertical )
.addClass( feedback.horizontal )
.appendTo( this );
}
}
});
});
还有一些漂亮的 CSS,你可以在 fiddle 中看到:
最佳答案
您可以使用 jQuery UI Tooltip 中的 open
和 close
方法来实现此目的.
我修改了您的代码以获得更好的可读性:
HTML
<section>
<label id="tt1" class="tooltip" for="vehiclePrice" title="">Vehicle Price</label>
<input type="text" id="vehiclePrice" placeholder="$25592 Suggested MSRP" onkeypress="return isNumberKey(event)" required />
</section>
<br><br><br><br><br><br>
<label id="tt2" class="tooltip" title="APR">Annual Percentage Rate (APR)</label>
JavaScript
$(function () {
$(".tooltip").tooltip({
track: true,
position: {
my: "center bottom-20",
at: "center top",
using: function (position, feedback) {
$(this).css(position);
$("<div>")
.addClass("arrow")
.addClass(feedback.vertical)
.addClass(feedback.horizontal)
.appendTo(this);
}
}
});
$( "#tt1" ).tooltip( "option", "content", "vehicle price" );
$("#tt1").tooltip("open");
$("#tt1").tooltip().off("mouseleave mouseover");
$( "#tt1" ).on( "tooltipclose", function( event, ui ) {
$("#tt1").tooltip("open");
} );
$("#vehiclePrice").focus(function () {
$("#tt1").tooltip("close");
});
});
参见JSFiddle .
关于javascript - 使 JQuery UI 工具提示持续存在,直到用户将注意力集中在输入字段上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21414175/