Bootstrap 3.0 всплывающие окна и подсказки
Я новичок в Bootstrap и у меня возникли проблемы с получением popover и tooltip функции для работы. У меня не было проблем с выпадающими списками и моделями, но мне кажется, что-то не хватает для всплывающих окон и подсказок.
Я получаю подсказки, но они не оформлены и расположены как примеры ушко. И поповер не работает вообще.
пожалуйста, посмотрите и дайте мне знать, что мне не хватает.
<!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>
8 ответов:
получается, что Эван Ларсен имеет лучший ответ. Пожалуйста, озвучьте его ответ (и / или выберите его как правильный ответ) - это блестяще.
используя трюк Эвана, вы можете создать все подсказки с одной строкой кода:
$('[data-toggle="tooltip"]').tooltip({'placement': 'top'});вы увидите, что все подсказки в вашем длинном абзаце имеют рабочие подсказки только с одной строкой.
в Примере jsFiddle (ссылка выше), я также добавлена ситуация, когда одна подсказка (по кнопке входа) включена по умолчанию. Кроме того, код подсказки добавляется к кнопке в jQuery, а не в разметке HTML.
Popovers do работать так же, как подсказки:
$('[data-toggle="popover"]').popover({trigger: 'hover','placement': 'top'});
и там у вас есть это! Наконец-то успех.
одна из самых больших проблем в выяснении этого материала заключалась в том, чтобы заставить bootstrap работать с jsFiddle... Вот что вы должны сделать:
- вам ссылка для Twitter Bootstrap CDN отсюда:http://www.bootstrapcdn.com/
- вставьте каждую ссылку в блокнот и удалите все, кроме URL. Ибо example:
//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css
- в jsFiddle, слева, откройте раскрывающийся список внешние ресурсы аккордеон
- вставить в каждый URL, нажав знак плюс после каждой вставки
открыть "Рамки и расширения" аккордеон выпадающий список, и выберите jQuery 1.9.1 (или в зависимости от того...)теперь вы готовы пойти.
Я использую это на всех моих страницах, чтобы включить подсказки
$(function () { $("[data-toggle='tooltip']").tooltip(); });
работа с 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>Javascript
$(function () { $("[data-toggle='tooltip']").tooltip(); });
Я должен был сделать это на 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 }); });и изменить мои заказы нагрузки:
- jQuery
- jQuery UI
- Bootstrap
по какой-то причине единственный способ заставить мой код работать-это переключить пару вещей. Если ничего не работает для вас до сих пор, пожалуйста, попробуйте этот:
$('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 (Ответ Карен) номер: перемещение активов active_admin в "каталоге поставщиков".