홈>
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
- 답변 # 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 }); });
도움이 되길 바랍니다 :)
관련 자료
- css - 부트 스트랩 4 - 왼쪽에 하나의 버튼을 정렬하고 오른쪽에 나머지 요소를 정렬하는 방법은 무엇입니까?
- html - 크기 조정이 가능한 2 개의 입력 요소에서 간격을 제거하는 방법은 무엇입니까?
- 파이썬에서 입력의 각 줄로 요소를 포함하는 목록을 만드는 방법
- javascript - 입력이 유효하지 않은 경우 도구 설명 표시
- javascript - 문자열에 HTML이 포함 된 부트 스트랩 툴팁
- html - CSS를 사용하여 부트 스트랩 툴팁 스타일 변경
- php - n 번호 뒤에 새 부트 스트랩 행에 요소를 넣습니다foreach 루프
- arrays - 반응에서 형성하기 위해 동적으로 입력 요소 추가
- Angular를 사용할 때 렌더링되지 않는 부트 스트랩 이미지 및 요소
- javascript - 이 함수보다 큰 다음 입력 요소를 제거하는 방법은 무엇입니까?
- 모바일 축소를 중심으로하지 않고 부트 스트랩 4 중심 탐색 모음 요소
- javascript - 부트 스트랩 모달에서 입력을 표시하는 문제
- javascript - 입력시 입력 요소 변경 순서
- 버튼 이름이있는 앵귤러 7에서 부트 스트랩 모달 양식을 여는 방법
- angular - typescript 파일에서 입력 요소를 비활성화하는 방법이 있습니까
- javascript - "입력"요소에 대해 "탭 선택기"효과를 얻는 방법은 무엇입니까?
관련 질문
- javascript : 페이지가 로드된 후
만 반환하고 $0으로 변경하므로 HTML 테이블의
가 비어 있거나 null인지 확인해야 합니다. - javascript : 배열에 일부 값을 저장하는 방법
- javascript : 사용자가 정의된 위치에 파일을 드롭하는지 어떻게 알 수 있습니까?
- javascript : 드롭다운 목록이 있는 다중 선택 디자인 문제
- javascript : jQuery에서 HTML code를 추가하기 전에 src 속성에 URL을 할당하는 방법
- javascript : jQuery를 바닐라 자바 스크립트로 교체하여 HTML 템플릿을 복사하면 자바 스크립트의 addeventlistener가 중단됩니다.
- javascript : 탐색 요소를 활성화/비활성화하기 위해 웨이포인트가 있는 단일 호출기 탐색을 만드는 방법은 무엇입니까?
- javascript : 사용자 정의 속성을 통해 선택 레이블 html의 값 가져오기
- javascript : 간격 자리 표시자
- javascript : li 앵커 모바일 비활성화
툴팁에 "title"매개 변수를 지정하십시오. 처럼 :
이것은 "rel"속성을 가진 입력 요소에는 아무런 문제가 없습니다.