2016-02-08 5 views
3

Я пытаюсь добавить всплывающую подсказку с помощью JQuery, но я не могу найти, где это ошибкаПочему подсказка не начинается с jquery?

JS:

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

HTML:

<p> 
    <i class="fa fa-user font-primary" data-toggle="tooltip" data-placement="top" title="news"></i> 5 | 
    <i class="fa fa-user font-success" data-toggle="tooltip" data-placement="top" title="enable"></i> 5 | 
    <i class="fa fa-user font-danger" data-toggle="tooltip" data-placement="top" title="disable"></i> 5 
</p> 
+0

код это нормально. У вас есть что-то еще, чего вы здесь не показываете. – dfsq

+0

[Документация] (https://api.jquery.com/ready/) говорит, что '.on (" ready "' работает иначе, чем другие версии. Пробовали ли вы другие версии? – Stryner

+0

Показать HTML, который добавляет jQuery и Bootstrap. –

ответ

0

У вас включал файл jquery-ui.css и jquery-ui.js?
Попробуйте создать новый HTML-файл и введите это, и видим результат:

<!doctype html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>jQuery UI Tooltip - Default functionality</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <script> 
    $(function() { 
     $(document).tooltip(); 
    }); 
    </script> 
    <style> 
    label { 
     display: inline-block; 
     width: 5em; 
    } 
    </style> 
    </head> 
    <body> 
    <p><a href="#" title="That&apos;s what this widget is">Tooltips</a> can be attached to any element. When you hover 
    the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p> 
    <p>But as it's not a native tooltip, it can be styled. Any themes built with 
    <a href="http://jqueryui.com/themeroller/" title="ThemeRoller: jQuery UI&apos;s theme builder application">ThemeRoller</a> 
    will also style tooltips accordingly.</p> 
    <p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p> 
    <p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p> 
    <p>Hover the field to see the tooltip.</p> 
    </body> 
</html> 
+0

да, я включил эти файлы –