Bootstrap 3.0 Всплывающие окна и подсказки

Question

Bootstrap 3.0 Всплывающие окна и подсказки

80

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

Я получаю всплывающие подсказки, но они не стилизованы и расположены как примеры начальной загрузки. И 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 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 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 some amazing content. It very engaging. right?">Click to toggle popover</a>
        </div>

        <!-- jQuery (necessary for Bootstrap 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>

user2560895 23 авг. 2013, в 21:04

Источник

0

Я только что опубликовал тот же вопрос несколько минут назад, также используя BS3 со всем остальным, работающим как модалы и вкладки, но без всплывающих подсказок или всплывающих окон ... обновит вас, если я что-то найду.
xXPhenom22Xx 23 авг. 2013, в 20:12
0

для popover варианты не определены
Cybermaxs 23 авг. 2013, в 20:18
0

Пока я просто пытался установить поведение по умолчанию, но мне интересно, чтобы оно показывалось при наведении курсора вместо щелчка, но это было следующим. Мне все еще нужно что-то добавить для вариантов?
user2560895 23 авг. 2013, в 20:40
0

Код выше - это то, что я сейчас использую, и он все еще не работает. Какие-либо предложения? У меня есть вещь в неправильном порядке или что-то?
user2560895 24 авг. 2013, в 18:10

Показать ещё 2 комментария

Теги:

javascript

jquery

twitter-bootstrap

css

8 ответов

236

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

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

Evan Larsen 23 авг. 2013, в 21:59

3

спасибо, из всех ответов, которые я дал, я бы сказал, что, возможно, я потратил на это меньше всего времени. Но все же каким-то образом он получил наибольшее количество очков.
Evan Larsen 19 авг. 2014, в 20:08
0

Но проблема в том. это не работает с хромом для меня. тогда я закончил делать что-то jsfiddle.net/arunpjohny/4HptX/4 из этого поста stackoverflow.com/questions/18372632/…
Md. Salahuddin 05 сен. 2014, в 06:55
0

@Md Salahuddin, так что теперь он работает, как только вы обновили свой jquery? Вы задаете вопрос или это было заявление?
Evan Larsen 08 сен. 2014, в 17:14
1

Это просто утверждение. вместо этого я использовал jsfiddle.net/arunpjohny/4HptX/4, так как этот код не работал с Chrome для моего случая.
Md. Salahuddin 08 сен. 2014, в 17:28

Показать ещё 2 комментария

25

Работа с 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(); 
});

Abhishek Goel 12 янв. 2014, в 11:58

0

Это не будет работать, если вы хотите использовать функцию всплывающих окон для данных, которые загружаются асинхронно (ajax, angular и т. Д.), Но ответ ниже будет.
Adrian Hedley 10 апр. 2015, в 11:15

6

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

Jonathan Leaders 03 апр. 2014, в 19:04

1

у меня была похожая проблема, я загружал jquery ui после начальной загрузки, ваш ответ заставил меня осознать проблему с этим.
hubson bropa 22 дек. 2014, в 22:04
0

проверьте это для popover, 1. запуск popovers, 2. позиционирование popovers через атрибуты данных
stom 09 нояб. 2015, в 14:31

5

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

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

santa 08 сен. 2014, в 22:06

1

Это единственное, что сработало для меня, так как элемент popover может быть не виден с самого начала. Спасибо!
J. Titus 20 июнь 2015, в 17:42

0

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

Это решение: https://stackoverflow.com/questions/10180418/rails-active-admin-css-conflicting-with-twitter-bootstrap-css (ответ Карен) TL;DR: переместить активы active_admin в каталог "vendor".

Arcolye 04 май 2015, в 07:12

0

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

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

xXPhenom22Xx 23 авг. 2013, в 20:56

0

Нет, при наведении на него всплывающего окна отображается только сам всплывающий элемент, а не всплывающая подсказка.
CpnCrunch 21 сен. 2015, в 15:37

0

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

<script type="text/javascript">

    $(document).ready(function() {

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

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

</script>

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

gibberish 23 авг. 2013, в 20:38

0

Хорошо, я изменил код, чтобы соответствовать тому, что вы предложили, я думаю. Это все еще не работает. Я еще не знаю Javascript, так что это немного сложно. Я просто пытаюсь получить примеры, чтобы они работали одинаково.
user2560895 24 авг. 2013, в 01:28
0

Popover один немного сложнее, но я получил всплывающую подсказку для работы, как указано выше.
gibberish 24 авг. 2013, в 22:22

Ещё вопросы

Я только что опубликовал тот же вопрос несколько минут назад, также используя BS3 со всем остальным, работающим как модалы и вкладки, но без всплывающих подсказок или всплывающих окон ... обновит вас, если я что-то найду.
для popover варианты не определены
Пока я просто пытался установить поведение по умолчанию, но мне интересно, чтобы оно показывалось при наведении курсора вместо щелчка, но это было следующим. Мне все еще нужно что-то добавить для вариантов?
Код выше - это то, что я сейчас использую, и он все еще не работает. Какие-либо предложения? У меня есть вещь в неправильном порядке или что-то?
спасибо, из всех ответов, которые я дал, я бы сказал, что, возможно, я потратил на это меньше всего времени. Но все же каким-то образом он получил наибольшее количество очков.
Но проблема в том. это не работает с хромом для меня. тогда я закончил делать что-то jsfiddle.net/arunpjohny/4HptX/4 из этого поста stackoverflow.com/questions/18372632/…
@Md Salahuddin, так что теперь он работает, как только вы обновили свой jquery? Вы задаете вопрос или это было заявление?
Это просто утверждение. вместо этого я использовал jsfiddle.net/arunpjohny/4HptX/4, так как этот код не работал с Chrome для моего случая.
Это не будет работать, если вы хотите использовать функцию всплывающих окон для данных, которые загружаются асинхронно (ajax, angular и т. Д.), Но ответ ниже будет.
у меня была похожая проблема, я загружал jquery ui после начальной загрузки, ваш ответ заставил меня осознать проблему с этим.
проверьте это для popover, 1. запуск popovers, 2. позиционирование popovers через атрибуты данных
Это единственное, что сработало для меня, так как элемент popover может быть не виден с самого начала. Спасибо!
Нет, при наведении на него всплывающего окна отображается только сам всплывающий элемент, а не всплывающая подсказка.
Хорошо, я изменил код, чтобы соответствовать тому, что вы предложили, я думаю. Это все еще не работает. Я еще не знаю Javascript, так что это немного сложно. Я просто пытаюсь получить примеры, чтобы они работали одинаково.
Popover один немного сложнее, но я получил всплывающую подсказку для работы, как указано выше.

gibberish · Accepted Answer · 2013-08-30T17-20-00.000Z

Оказывается, что Эван Ларсен имеет лучший ответ. Пожалуйста, поддержите его ответ (и/или выберите его как правильный ответ) - он блестящий.

Работает jsFiddle здесь

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

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

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

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

Popovers работают так же, как и всплывающие подсказки:

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

И вот оно! Успех наконец.

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

Получить ссылку для Twitter Bootstrap CDN отсюда: http://www.bootstrapcdn.com/
Вставьте каждую ссылку в блокнот и вычеркните ВСЕ, кроме URL. Например:
//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css
В jsFiddle, с левой стороны, откройте раскрывающийся список аккордеона внешних ресурсов
Вставить в каждый URL-адрес, нажимая знак "плюс" после каждой вставки
Теперь откройте раскрывающееся меню аккордеона "Рамки и расширения" и выберите jQuery 1.9.1 (или какой бы...)

СЕЙЧАС, вы готовы к работе.

в jsFiddle, почему триггер не окружен одинарными кавычками, а размещение -?
Нет веских причин, я просто пропустил это. Но это похоже на работу. Возможно, однословные ключи не нуждаются в кавычках - иногда они не требуются - тем не менее, я обычно вставляю их.
это звучит логично для меня. Спасибо за разъяснения.
это звучит как бред для меня. Ха! просто должен был сказать это;)
Можете ли вы использовать этот метод в относительности к конкретному контейнеру? Создание всех всплывающих подсказок или всплывающих окон в определенном контейнере?
Должно быть в состоянии ... вот jsFiddle, который демонстрирует изоляцию одного div из выбора всех div, содержащих атрибут data-toggle="tooltip" . В примере с jsFiddle вы хотите создать всплывающие подсказки в одном элементе div, а не окрашивать фон одного элемента div в желтый - поэтому вы должны заменить строку $(this).css('background','yellow'); с $(this).tooltip({'placement': 'top'});