>

input 때문에 이것이 가능한지 100 % 확신하지 못합니다   rel 가 없습니다  속성 (Bootstrap 웹 사이트의 예는 rel="tooltip" 의 예를 하나만 보여줍니다. ), 작동해야한다고 생각합니다.

이것은 내 HTML입니다 :

<input id="password" type="password" />

이것이 트리거를 시도하는 방법입니다.

$(document).ready(function () {
    $('input[id=password]').tooltip({'trigger':'focus'});
});

그리고 나는 이것을 시도했다 :

$('#password').tooltip({'trigger':'focus'});

그리고 그들 중 어느 것도 효과가없는 것 같습니다. 결국 수동으로 트리거하고 싶지만 이것이 첫 번째 단계입니다. 아무도 이것에 대한 해결책을 알고 있습니까? 전혀 가능합니까? 감사합니다.


  • 답변 # 1

    툴팁에 "title"매개 변수를 지정하십시오. 처럼 :

    $('#password').tooltip({'trigger':'focus', 'title': 'Password tooltip'});
    
    

    이것은 "rel"속성을 가진 입력 요소에는 아무런 문제가 없습니다.

  • 답변 # 2

    모든 텍스트 상자에 대해 더 일반적인 툴팁 옵션을 알고 싶은 경우

    $(document).ready(function() {
      $('input[rel="txtTooltip"]').tooltip();
    });
    
    
    <link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <input type="text" rel="txtTooltip" title="**Your Title**" data-toggle="tooltip" data-placement="bottom">
    
    

  • 답변 # 3

    Boostrap 3과 4

    @Senthil의 응답을 기반으로 부트 스트랩 3.x 또는 4.x 및 JQuery를 사용하면 title 인 한 모든 입력 요소에 대한 툴팁이 설정됩니다.  재산은 rel 의 필요없이 설정됩니다  속성.

    HTML :

    <input class="form-control" id="inputTestID" name="inputTest" placeholder="Test" type="text" data-placement="bottom" title="Tooltip Text">
    
    

    자바 스크립트 :

    $(document).ready(function(){
      $('input').tooltip();
    });
    
    

    CSS :

    .tooltip-inner {
      background-color: #fff; 
      color: #000;
      border: 1px solid #000;
    }
    
    

    Bootstrap 3 바이올린.

    Bootstrap 4 바이올린.

  • 답변 # 4

    입력 필드가 여러 개인 경우 유용 할 수 있으므로 여러 툴팁 ()을 호출하지 않아도됩니다.

    이 작업은 입력 필드의 ID를 기반으로하며 클래스로 작동하도록 할 수 있습니다.

    $('input').each(function (i, e) {
        var label;
        switch ($(e).attr('id')) {
            case 'input-one':
                label = 'This is input #1';
                break;
            case 'input-two':
                label = 'This is input #2';
                break;
        }
        $(e).tooltip({ 'trigger': 'focus', 'title': label });
    });
    
    

    도움이 되길 바랍니다 :)

관련 자료

  • 이전 python - 선택적 매개 변수로 데코레이터를 작성하는 방법은 무엇입니까?
  • 다음 angular - `[(ngModel)]`vs`[(value)]`