2

我有一个输入，当用户第一次加载表单时，它会填充一个值。我想让这个工具提示一直存在，直到用户专注于这一领域。我在整个页面上使用相同的工具提示，并且只需要在页面加载时显示这 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：

小提琴

4

2 回答 2

4

您可以在jQuery UI Tooltipopen中使用和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。

于 2014-02-02T05:25:20.397 回答
0

您可以创建自己的 div，按照您想要的方式设置样式，并在需要时显示/隐藏/淡化它，而不是使用 jquery ui 工具提示。

于 2014-01-29T07:28:35.800 回答