부트 스트랩 3.0 팝 오버 및 툴팁
Bootstrap을 처음 사용하고 팝 오버 및 도구 설명 기능을 작동하는 데 문제가 있습니다. 드롭 다운과 모델에 문제가 없었지만 팝 오버와 툴팁에 뭔가 빠진 것 같습니다.
도구 설명이 표시되지만 부트 스트랩 예제와 같은 스타일과 위치가 아닙니다. 그리고 팝 오버가 전혀 작동하지 않습니다.
한 번 살펴보고 내가 무엇을 놓치고 있는지 알려주십시오.
<!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>
밝혀 에반 라슨이 가장 좋은 대답이있다 . 그의 답변을 찬성 (또는 정답으로 선택)하십시오. 훌륭합니다.
Evan의 트릭을 사용하면 한 줄의 코드로 모든 툴팁을 인스턴스화 할 수 있습니다.
$('[data-toggle="tooltip"]').tooltip({'placement': 'top'});
긴 단락의 모든 도구 설명에 해당 한 줄만있는 작업 도구 설명이있는 것을 볼 수 있습니다.
In the jsFiddle example (link above), I also added a situation where one tooltip (by the Sign-In button) is ON by default. Also, the tooltip code is ADDED to the button in jQuery, not in the HTML markup.
Popovers do work the same as the tooltips:
$('[data-toggle="popover"]').popover({trigger: 'hover','placement': 'top'});
And there you have it! Success at last.
One of the biggest problems in figuring this stuff out was making bootstrap work with jsFiddle... Here's what you must do:
- Get reference for Twitter Bootstrap CDN from here: http://www.bootstrapcdn.com/
- Paste each link into notepad and strip out ALL except the URL. For example:
//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css - In jsFiddle, on left side, open the External Resources accordion dropdown
- Paste in each URL, pressing plus sign after each paste
- Now, open the "Frameworks & Extensions" accordion dropdown, and select jQuery 1.9.1 (or whichever...)
NOW you are ready to go.
I use this on all my pages to enable tooltip
$(function () { $("[data-toggle='tooltip']").tooltip(); });
Working with BOOTSTRAP 3 : Short and Simple
Check - 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>
Javascript
$(function () {
$("[data-toggle='tooltip']").tooltip();
});
I had to do it on DOM ready
$( 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
});
});
And change my load orders to be:
- jQuery
- jQuery UI
- Bootstrap
For some reason the only way I was able to get my code to work is by switching couple of things. If nothing worked for you so far, please give a whirl to this:
$('body').popover({
selector: '[data-toggle="popover"]',
trigger: 'hover',
placement: 'right'
});
You have a syntax error in your script and, as noted by xXPhenom22Xx, you must instantiate the tooltip.
<script type="text/javascript">
$(document).ready(function() {
$('.btn-danger').tooltip();
}); //END $(document).ready()
</script>
Note that I used your class "btn-danger". You can create a different class, or use an id="someidthatimakeup".
You just need to enable the tooltip:
$('some id or class that you add to the above a tag').popover({
trigger: "hover"
})
If you're using Rails and ActiveAdmin, this is going to be your problem: https://github.com/seyhunak/twitter-bootstrap-rails/issues/450 Basically, a conflict with active_admin.js
This is the solution: https://stackoverflow.com/a/11745446/264084 (Karen's answer) tldr: Move active_admin assets into the "vendor" directory.
참고URL : https://stackoverflow.com/questions/18410922/bootstrap-3-0-popovers-and-tooltips
'Programing' 카테고리의 다른 글
| "실행 대상 iOS 장치가 구성표를 실행하는 데 유효하지 않습니다." (0) | 2020.09.20 |
|---|---|
| angular2 제출 버튼없이 Enter를 눌러 양식 제출 (0) | 2020.09.20 |
| xcrun : 오류 : 활성 개발자 경로 ( "/Applications/Xcode.app/Contents/Developer")가 없습니다. (0) | 2020.09.20 |
| 앱 스토어의 애플리케이션에 유효한 'aps-environment'자격 문자열이 없습니다. (0) | 2020.09.20 |
| Facebook Graph API : 한 번의 요청으로 더 큰 사진 가져 오기 (0) | 2020.09.20 |