Bootstrap Popover не отображается

В настоящее время у меня есть набор, который не инициализируется. Мой код выглядит следующим образом:Bootstrap Popover не отображается

HTML:

<div data-toggle="popover" data-placement="bottom" data-content="xyz">...</div>

JavaScript:

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

Я включил все, что нужно для CSS и библиотеки мудрых и сумел повторить этот вопрос здесь в скрипке : https://jsfiddle.net/W3R3W0LF666/33rmse7m/

До сих пор я пытался переместить текст инициализации в разные места в файле JS, чтобы исключить любые проблемы с иерархией

источник

2015-09-08 Web Develop Wolf

где вы включили JS файлы на этом jsfiddle? у вас есть ошибка 'TypeError: $ (...).popover не является функцией 'js lib не включен в эту скрипту – atmd

Вы забыли включить' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '. Может быть, что-то в коде? Работа: https://jsfiddle.net/33rmse7m/2/ – Zl3n

Это исправляет скрипку, но все еще не исправлено в моем коде - в моем коде popover находится внутри таблицы - это может изменить ситуацию? –

Initialize

$('[data-toggle="popover"]').popover()

Поп это

$('[data-toggle="popover"]').popover('show');

источник

2015-09-08 10:25:50 Ppp

Я обновил свой код, приведенный ниже код Проверьте JSFiddle:

$(document).ready(function(){ 
    $('[data-toggle="popover"]').popover({ 
     placement : 'bottom' 
    }); 
}); 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
<button data-toggle="popover" class="btn btn-primary" data-content="xyz">Click Me</button>

источник

2015-09-08 10:27:48 Aparna

Пожалуйста, подумайте над редактированием сообщения, чтобы добавить больше объяснений о том, что делает ваш код, и почему он решит проблему. Ответ, который в основном содержит только код (даже если он работает), обычно не помогает OP понять их проблему. – SuperBiasedMan

Проверить это одно, это поможет вам ..

HTML

<!DOCTYPE html> 
<html lang="en"> 

    <head> 
    <meta charset="utf-8" /> 
    <title>Bootstrap, from Twitter</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <meta name="description" content="" /> 
    <meta name="author" content="" /> 


    <!-- Le styles --> 
    <link href="style.css" rel="stylesheet" /> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 

    </head> 

    <body> 
    <a href="#" data-toggle="popover" title="Popover Header" data-content="XYZ">Toggle popover</a> 


    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
    <script> 
     $(document).ready(function(){ 
      $('[data-toggle="popover"]').popover(); 
     }); 
    </script> 
    </body> 

</html>

источник

2015-09-08 10:29:31

Вы забыли загрузить внешние ресурсы.

Из документов:

How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. manual cannot be combined with any other trigger.

Вы должны определить триггер data-trigger="hover":

<div data-trigger="hover" data-toggle="popover" data-placement="bottom" data-content="xyz">...</div>

взглянуть на эту fiddle.

PS: Ваш фактически работает, но он запускается только при нажатии.

источник

2015-09-08 10:29:51 LeftyX

Просто завернутые ваш JQuery скрипт так:

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

Или, если вы хотите, чтобы загрузить скрипт на document ready, а затем использовать это:

jQuery(document).ready(function($){ 
    $('[data-toggle="popover"]').popover(); 
});

Причина:$ причины имя -конфликт между jQuery и plain-js/other-libraries поэтому вы должны называть его по-разному, поэтому браузер знает, что он использует jQuery, а не какую-то другую библиотеку.

Вот jsfiddle с выше кодами: https://jsfiddle.net/AndrewL32/33rmse7m/7/

источник

2015-09-08 10:41:33

Это не его проблема. Он работает даже без [обертки] (https://jsfiddle.net/37p0562f/1/). – LeftyX

@LeftyX В jsFiddle он будет работать без оболочки, но в браузере ему нужно добавить эту оболочку. У этого парня была такая же проблема, как у него: http://stackoverflow.com/questions/31962361/error-uncaught-typeerror-datetimepicker-is-not-a-function/31962549#31962549 –

И вот этот парень: http : //stackoverflow.com/questions/7975093/typeerror-undefined-is-not-a-function-evaluating-document –

Bootstrap Popover не отображается

ответ

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