テキストボックスをクリックするとツールチップが表示されます

パスワードtextboxをクリックすると、tooltipが表示されない場合があります。誰でも、なぜjqueryコードがうまくいかないのですか？テキストボックスをクリックするとツールチップが表示されます

   <div class="form-group"> 

       <input type="password" name="password" id="password" tabindex="1" class="form-control" placeholder="Password" required /> 

        </div> 

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <!--jquery--> 

         <script> 

         $(document).ready(function() { 

        $('#password').on({ 
            "click": function() { 
              $(this).tooltip({ items: "#password", content: "Displaying on click"}); 
              $(this).tooltip("open"); 
                 }, 
               "mouseout": function() {  
               $(this).tooltip("disable"); 
                      } 
                       }); 

          }); 


        </script>

出典

2016-04-02 steve

'$（この）.tooltip（ "無効"）を交換してみてください;'と '$（この）.tooltip（ "クローズ"）;'と何が起こるかを見ます。 – TechnoCF

こんにちはTechnoCF何も私が私の代わりに実行されているようだ。 – steve

アイデアは、パスワードが特定の文字などでなければならないというメッセージをユーザに表示するツールチップです。 – steve

ツールチップはjqueryライブラリの一部ではありません。 jquery UIをインクルードする必要があります。また、無効にする前にツールチップが初期化されていることを確認する必要があります。

<html> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
<script> 
    $(document).ready(function() { 
     var hasToolTip =false; 
     $('#password').on({ 
      "click": function() { 
       hasToolTip = true; 
       $(this).tooltip({ items: "#password", content: "Displaying on click"}); 
       $(this).tooltip("open"); 
      }, 
      "mouseout": function() {  
       if(hasToolTip) 
       { 
        $(this).tooltip("disable"); 
        hasToolTip = false; 
       }             
      } 
     }); 
    }); 

</script> 
<body> 
    <div class="form-group"> 
     <input type="password" name="password" id="password" tabindex="1" class="form-control" placeholder="Password" required /> 
    </div> 
</body>

https://jqueryui.com/tooltip/

出典

2016-04-03 00:10:39 gmfm

gmfm。まだ動かない。 – steve

修正された応答が作業コードを表示し、初期化エラーを修正しました。 – gmfm

ありがとうgmfm！それは働いて得た:) – steve

テキストボックスをクリックするとツールチップが表示されます

答えて

関連する問題