Плагин jQuery tooltip не создает подсказки - PullRequest
Новая
       23

Плагин jQuery tooltip не создает подсказки

2 голосов
/ 17 февраля 2012

Мне не повезло заставить всплывающие подсказки работать с Firefox.Поэтому я решил попробовать плагин jQuery tooltip.Но это не работает для меня.

Изображения вставляются в html в результате действий пользователя.Переменная состояния содержит строку, а раздел html ниже (div class = "statusicons" ...) - это то, как она выглядит в firebug после запуска функций insert и tooltip ().Подсказка () никоим образом не изменяет HTML.Тем не менее, я не получаю "подсказка () не является функцией", поэтому я должен предположить, что плагин кода найден. 

<script src="/plugins/snap/jquery.tooltips.min.js" type="text/javascript"></script>
...
jQuery("#devinfo").jqGrid('setCell',id,'status',status);
$("#davo img[title]").tooltip();


<div class="statusicons" id="davo">
<img width="24" height="24" title="Drive not mounted" alt="Drive not mounted" src="/plugins/snap/images/mount2.png">
&nbsp;<img width="24" height="24" title="Drive not shared" alt="Drive not shared" src="/plugins/snap/images/share2.png">
&nbsp;<img width="24" height="24" title="Drive not busy" alt="Drive not busy" src="/plugins/snap/images/busy2.png">
&nbsp;<img width="24" height="24" title="Drive is spinning" alt="Drive is spinning" src="/plugins/snap/images/drive1.png">
&nbsp;<img width="24" height="24" title="Drive is precleared" alt="Drive is precleared" src="/plugins/snap/images/precleared1.png">
</div>

1 Ответ

0 голосов
/ 17 февраля 2012

Измененный ответ:

Попробуйте этот

заголовок вашей страницы, как в тегах <head></head>, используйте таблицу стилей для вашей подсказки и установите для ее отображения значение noneпервый.

Вот небольшой макет, основанный на том, что вы предоставили: 

<html>
<head>
<style type="text/css">
.tooltip {
    display:none;
    background:transparent url(/images/some_image.jpg);
    font-size:12px;
    height:200px;
    width:300px;
    padding:25px;
    color:#fff; 
}
</style>
</head>
<body>
<script     
        type="text/javascript" 
        src="/jquery/jquery-latest.js" >
    </script>
    <script     
        type="text/javascript" 
        src="/jquery/jquery.tools.min.js" >
    </script>
    <script type="text/javascript">
    $(document).ready(function () {
    $("#davo img[title]").tooltip();
});
    </script>   
    <br /><br /><br /><br />
    <div class="statusicons" id="davo">
    <img width="100" height="100" id="haha" title="Drive not mounted" src="/images/some_image_2.jpg">
    </div>

</body>
</html>

А теперь:

Поскольку вы динамически добавляете изображения встраница в коде, где вы добавляете изображения на страницу, вам понадобится выполнить следующую инструкцию JQuery: 

$(function(){$("#davo img[title]").tooltip();});

Таким образом, каждый раз, когда он будет связан, существуют ли изображения в документе.ready или вы включаете его каждый раз, когда добавляете вещи.

См. также ссылку: http://flowplayer.org/tools/demos/tooltip/index.html

...