2013-11-14 2 views
0

Я использую следующий код для отображения изображения в качестве пирогаBootstrap поповер вопрос

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <script src="C:\Users\zj9\Desktop\dist\Page\assets\js\jquery.js"></script> 
    <script src="C:\Users\zj9\Desktop\dist\Page\assets\js\bootstrap-tooltip.js"></script> 
    <script src="C:\Users\zj9\Desktop\dist\Page\assets\js\bootstrap-popover.js"></script> 
    <script type="text/javascript"> 

    $(document).ready(function() { 
     var img = '<img src="https://si0.twimg.com/a/1339639284/images/three_circles/twitter-bird-white-on-blue.png" />'; 
     $("#blob").popover({ title: 'Look! A bird image!', content: img });  
    } 
    </script> 
    </head> 
    <body> 
    <a href="#" id="blob" class="btn large primary" rel="popover" style="margin-top: 300px">hover for popover</a> 
    </body> 
</html> 

Но поповер никогда не получает отображается. Я использовал абсолютные пути, чтобы убедиться, что эта проблема не будет изменена. У меня нет опыта программирования html или java-скриптов, любая помощь очень ценится.

ответ

3

Вам не хватает закрытия ');' для вашего блока javascript. Это приводит к тому, что popover не регистрируется в ссылке.

Вот working fiddle. Кроме того, обратите внимание, что я добавил триггер: атрибуты hover и html: true, чтобы popover показывал, когда вы наводите курсор, а изображение вместо рендеринга отображается.

$(document).ready(function() { 
    var img = '<img src="https://si0.twimg.com/a/1339639284/images/three_circles/twitter-bird-white-on-blue.png" />'; 
    $("#blob").popover({ title: 'Look! A bird image!', content: img, trigger: 'hover', html: true });  
}); 
+0

Спасибо большое, работал как шарм ... – Zohaib

+0

В таких случаях, как это интегрированная среда, как Dreamweaver помогает много с синтаксическими ошибками. –

+0

@SandeepBansal Я загляну в него, спасибо ... – Zohaib

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