jquery - 입력 요소에 부트 스트랩 툴팁을 사용하는 방법은 무엇입니까?

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

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

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

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

$(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">

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 바이올린.

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

이 작업은 입력 필드의 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 });
});

도움이 되길 바랍니다 :)