부트스트랩 3.0 팝오버 및 툴팁
저는 부트스트랩을 처음 접하는데 팝오버와 툴팁 기능이 작동하는 데 어려움을 겪고 있습니다.드롭다운과 모델은 문제가 없었는데 팝업과 툴팁이 부족한 것 같습니다.
툴팁을 받아서 보여드리고 있는데 부트스트랩 예제처럼 스타일이 안 맞고 위치가 정해져 있습니다.그리고 팝업이 전혀 작동하지 않습니다.
제가 무엇을 놓쳤는지 한 번 보시고 알려주시기 바랍니다.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" media="screen">
<link href="css/font-awesome.min.css" rel="stylesheet" media="screen">
<link href="css/index.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<p id="tool"class="muted" style="margin-bottom: 0;">
Tight pants next level keffiyeh
<a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.</p>
<h3>Live demo</h3>
<div style="padding-bottom: 24px;">
<a id="pop" href="#" class="btn btn-lg btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script type="text/javascript">
$(document).ready(function() {
$('.tool').tooltip();
$('.btn').popover();
}); //END $(document).ready()
</script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap.min.css"></script>
</body>
</html>
툴팁을 활성화하기 위해 모든 페이지에서 이 기능을 사용합니다.
$(function () { $("[data-toggle='tooltip']").tooltip(); });
에반 라센이 가장 좋은 답을 가지고 있는 것으로 밝혀졌습니다.제발 그의 대답에 찬성표를 던져주세요(그리고/또는 정답으로 선택해주세요) - 훌륭합니다.
Evan의 트릭을 사용하면 한 줄의 코드로 모든 툴팁을 인스턴스화할 수 있습니다.
$('[data-toggle="tooltip"]').tooltip({'placement': 'top'});
긴 문단의 모든 툴팁에는 해당 한 줄만으로 작동하는 툴팁이 있습니다.
jsFiddle 예제(위 링크)에서 (사인인 버튼에 의해) 툴팁 하나가 기본적으로 ON되어 있는 상황도 추가하였습니다.또한 툴팁 코드는 HTML 마크업이 아닌 jQuery의 버튼에 추가됩니다.
팝업은 툴팁과 동일하게 작동합니다.
$('[data-toggle="popover"]').popover({trigger: 'hover','placement': 'top'});
그리고 당신은 그것이 있습니다!드디어 성공.
이 문제를 해결하는 데 가장 큰 문제 중 하나는 jsFiddle로 부트스트랩을 만드는 것이었습니다.다음은 당신이 해야 할 일입니다.
- 여기서 Twitter Bootstrap CDN 참조하기: http://www.bootstrapcdn.com/
- 각 링크를 메모장에 붙여넣고 URL을 제외한 모든 링크를 제거합니다. 예:
//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css - 왼쪽의 jsFiddle에서 외부 리소스 아코디언 드롭다운을 엽니다.
- 각 URL에 붙여넣기, 붙여넣기 후 더하기 기호 누르기
- 이제 "Frameworks & Extensions" 아코디언 드롭다운을 열고 jQuery 1.9.1(또는 어느 것이든)을 선택합니다.
이제 여러분은 갈 준비가 되었습니다.
BOOTSTRAP 3: 짧고 간단하게 작업하기
점검 - JS Fiddle
HTML
<div id="myDiv">
<button class="btn btn-large btn-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">Tooltip on top</button>
</div>
자바스크립트
$(function () {
$("[data-toggle='tooltip']").tooltip();
});
DOM에서 준비해서 해야 했어요.
$( document ).ready(function () { // this has to be done after the document has been rendered
$("[data-toggle='tooltip']").tooltip({html: true}); // enable bootstrap 3 tooltips
$('[data-toggle="popover"]').popover({
trigger: 'hover',
'placement': 'top',
'show': true
});
});
로드 순서를 다음과 같이 변경합니다.
- jQuery
- jQuery UI
- 부츠트랩
어떤 이유에서인지 코드를 작동시킬 수 있는 유일한 방법은 몇 가지를 바꾸는 것뿐입니다.지금까지 아무 것도 효과가 없었더라면 이 문제를 해결해 주시기 바랍니다.
$('body').popover({
selector: '[data-toggle="popover"]',
trigger: 'hover',
placement: 'right'
});
스크립트에 구문 오류가 있으며 xXPhenom22Xx에서 언급한 대로 도구 설명을 인스턴스화해야 합니다.
<script type="text/javascript">
$(document).ready(function() {
$('.btn-danger').tooltip();
}); //END $(document).ready()
</script>
제가 당신의 수업 "btn-danger"를 사용했다는 것을 주목하세요.다른 클래스를 만들 수도 있고, 다른 클래스를 사용할 수도 있습니다.id="someidthatimakeup".
툴팁을 활성화하기만 하면 됩니다.
$('some id or class that you add to the above a tag').popover({
trigger: "hover"
})
Rails 및 ActiveAdmin을 사용하는 경우 이 문제가 발생합니다. https://github.com/seyhunak/twitter-bootstrap-rails/issues/450 기본적으로 active_admin.js와 충돌합니다.
이것이 해결책입니다: https://stackoverflow.com/a/11745446/264084 (Karen's answer) tldr: active_admin 자산을 "vendor" 디렉토리로 이동합니다.
언급URL : https://stackoverflow.com/questions/18410922/bootstrap-3-0-popovers-and-tooltips
'programing' 카테고리의 다른 글
| jQuery 하이라이트 테이블 행 (0) | 2023.10.02 |
|---|---|
| 스프링 보안에서 CSS 또는 JS 리소스를 로드할 수 없음 (0) | 2023.10.02 |
| .NET에서 개체를 UTF-8 XML로 직렬화 (0) | 2023.10.02 |
| 약한 심볼을 덮어쓰기 위해 정적 라이브러리에서 gcc 링크 강한 심볼을 만드는 방법? (0) | 2023.10.02 |
| 주피터 노트북에서 3D 그림을 대화식으로 만들기 (0) | 2023.10.02 |