Сделать подсказку JQuery UI постоянной до тех пор, пока пользователь не сфокусируется на поле ввода

Question

У меня есть вход, который заполняется по значению, когда пользователь сначала загружает форму. Я хотел бы, чтобы эта одна всплывающая подсказка была постоянной, пока пользователь не сосредоточится на этом одном поле. Я использую ту же всплывающую подсказку на странице, и мне нужна только эта 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

Answer 1

Вы можете достичь этого, используя методы open и close в jQuery UI Tooltip.

Я изменил код для лучшей читаемости:

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.

Answer 2

Вы можете создайте свой собственный стиль, подобный тому, который вы хотите, и покажите/скройте/исчезните, когда вы ire вместо использования jQuery ui tooltip.