Я новичок в Bootstrap, и у меня возникли проблемы с тем, чтобы использовать функции popover и tooltip. У меня не было проблем с выпадающими списками и моделями, но мне кажется, что что-то не хватает для popover и всплывающих подсказок.Bootstrap 3.0 Popovers and tooltips

Я получаю всплывающие подсказки, но они не стилизованы и расположены как примеры начальной загрузки. И popover не работает вообще.

Пожалуйста, посмотрите и дайте мне знать, чего я не хватает.

 <!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>

источник

2013-08-23 user2560895

Я только что опубликовал один и тот же вопрос несколько минут назад, также используя BS3 со всем остальным, работающим как Modals и Tabs, но никаких всплывающих подсказок или Popovers ... не будет обновлен, если я что-то найду. – xXPhenom22Xx

для popover, ** options ** не определен – Cybermaxs

На данный момент я просто пытался получить поведение по умолчанию, но я заинтересован в том, чтобы он отображался при наведении вместо клика, но это было следующим. Мне все еще нужно что-то добавить для опций? – user2560895

143

Оказывается, что Evan Larsen has the best answer. Пожалуйста, поддержите его ответ (и/или выберите его как правильный ответ) - он блестящий.

Working jsFiddle here

Используя трюк Эвана, вы можете создать экземпляр все всплывающие подсказки с помощью одной строки кода:

$('[data-toggle="tooltip"]').tooltip({'placement': 'top'});

Вы увидите, что все всплывающие подсказки в вашей длинной абзаце работают всплывающие подсказки с только что в одной строке.

В примере jsFiddle (ссылка выше) я также добавил ситуацию, когда одна подсказка (по кнопке входа) включена по умолчанию. Кроме того, код всплывающей подсказки добавляется к кнопке в jQuery, а не в разметке HTML.

Popovers сделать работу так же, как подсказках:

$('[data-toggle="popover"]').popover({trigger: 'hover','placement': 'top'});

А что у вас есть! Успех наконец.

Одна из самых больших проблем в выясняя этот материал делал самозагрузки работу с jsFiddle ... Вот что вы должны сделать:

Получить ссылку на Twitter Bootstrap CDN здесь: http://www.bootstrapcdn.com/
Paste каждую ссылку в блокнот и вычеркнуть ВСЕ, кроме URL. Например:
//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.CSS
В jsFiddle, на левой стороне, откройте Аккордеон DropDown внешние ресурсы
Вставить в каждом URL, нажав знак плюс после каждой вставки
Теперь откройте «Каркасы & Extensions» гармошки выпадающее меню и выберите jQuery 1.9.1 (или в зависимости от того, что ...)

ТЕПЕРЬ ВЫ готовы.

источник

2013-08-30 16:31:53 gibberish

в jsFiddle, почему триггер не окружен одинарными кавычками, а местом размещения? – HPWD

Нет веской причины, я просто пропустил это. Но, похоже, это работает. Возможно, клавишам с одним словом не нужны кавычки - иногда они не требуются - тем не менее, я обычно помещаю их. – gibberish

, что звучит логично для меня. Спасибо за разъяснения. – HPWD

Вам просто нужно включить подсказки:

$('some id or class that you add to the above a tag').popover({ 
    trigger: "hover" 
})

источник

2013-08-23 20:16:01 xXPhenom22Xx

Нет, это просто покажет сам popover, когда вы наведите курсор на него, а не подсказку. – CpnCrunch

У вас есть синтаксические ошибки в сценарии и, как было отмечено xXPhenom22Xx, вы должны создать экземпляр всплывающей подсказки.

<script type="text/javascript"> 

    $(document).ready(function() { 

     $('.btn-danger').tooltip(); 

    }); //END $(document).ready() 

</script>

Обратите внимание, что я использовал ваш класс «btn-danger». Вы можете создать другой класс или использовать id="someidthatimakeup".

источник

2013-08-23 20:23:08 gibberish

Хорошо, я изменил код, чтобы соответствовать тому, что вы предложили, я думаю. Он все еще не работает. Я еще не знаю Javascript, так что это немного сложно. Я просто пытаюсь привести примеры, которые они должны работать одинаково. – user2560895

Попкор, немного сложный, но я получил подсказку, чтобы работать, как указано выше. – gibberish

225

Я использую это на всех своих страницах, чтобы включить всплывающую подсказку

$(function() { $("[data-toggle='tooltip']").tooltip(); });

источник

2013-08-23 20:47:54

спасибо, из всех ответов, которые я дал, я должен был сказать, что я, вероятно, провел меньше времени на этом. Но все же как-то он набрал наибольшее количество очков. –

Но проблема в этом. он не работает с хром для меня. то я закончил с чем-то http: // jsfiddle.net/arunpjohny/4HptX/4/из этого сообщения http://stackoverflow.com/questions/18372632/bootstrap-tooltip-not-working-in-chrome –

@Md Salahuddin, поэтому теперь он работает, как только вы обновили свой jquery ? Вы задаете вопрос или это заявление? –

Работа с Bootstrap 3: Короткий и простой

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(); 
});

источник

2014-01-12 09:59:07

Это не сработает, если вы хотите использовать функции загрузки данных, которые загружаются асинхронно (ajax, angular и т. д.), но ответ будет ниже. –

Я должен был сделать это на 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
Bootstrap

источник

2014-04-03 18:08:44

У меня была аналогичная проблема, я загружал jquery ui после загрузки, ваш ответ заставил меня понять проблему с этим. –

проверьте [this] (http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-popovers.php) для popover, ** 1. Запуск Popovers, 2. Позиционирование Popovers через атрибуты данных ** – stom

По какой-то причине, единственный способ, которым я был в состоянии получить код для работы это путем переключения нескольких вещей. Если ничего не работает для вас до сих пор, пожалуйста, дайте пагубным для этого:

$('body').popover({ 
    selector: '[data-toggle="popover"]', 
    trigger: 'hover', 
    placement: 'right' 
});

источник

2014-09-08 20:21:30 santa

Это единственное, что сработало для меня, так как элемент popover, возможно, не для начала. Благодаря! –

Если вы используете Rails и ActiveAdmin, это будет ваша проблема: https://github.com/seyhunak/twitter-bootstrap-rails/issues/450 В принципе, конфликт с active_admin.js

Это решение: https://stackoverflow.com/a/11745446/264084 (ответ Карен) tldr: Перемещение active_admin активов в каталоге "поставщика".

источник

2015-05-04 05:41:57 Arcolye

Bootstrap 3.0 Popovers and tooltips

ответ

Работа с Bootstrap 3: Короткий и простой

Смежные вопросы