jquery, qtipпочему моя всплывающая подсказка не работает?

Вот мой код:

<!DOCTYPE html>
 <html>
  <head>
   <script type="text/javascript" src="libraries/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" src="libraries/jquery.qtip-1.0.0-rc3.min.js"></script>
   <script>

     $('a_tip').qtip({
     content: 'This is an active list element',
     show: 'mouseover',
     hide: 'mouseout'
      })

   </script>
  </head>
<body>

 <div id = "a_tip">
  Want a tip?
 </div>

</body>

I have my jquery and qtip libraries in the right places - no errors in chrome console at all. I did my best following the tutorial on the qtip website, but can't see where I'm wrong. All I want is for the tooltip to show when the cursor is placed over 'Want a tip?' Thanks for any help!


jquery qtip
person CHarris    schedule 10.09.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы должны добавить код, когда DOM будет готов и вам не хватает # для селектора идентификатора, попробуйте что-то вроде этого:

<script>
 $(function(){//When DOM is ready
    $('#a_tip').qtip({
      content: 'This is an active list element',
      show: 'mouseover',
      hide: 'mouseout'
    });
 });

</script>

Также добавьте следующий стиль, чтобы появился qTip:

<style>
  #a_tip{
     display:inline
  }
</style>
person Raúl Juárez    schedule 10.09.2013
comment
Спасибо за это - отсутствующий селектор id и $(function(), я уверен, что это часть проблемы.... но это все еще не работает. Никаких ошибок в консоли вообще. Может быть, мне нужно добавить что-то еще в ‹ div id = a_tip› часть, буду искать.... - person CHarris; 10.09.2013
comment
Кажется, все в порядке, возможно, вы могли бы перейти на qTip2, версия 1 qTip и 1.3 jQuery устарели и больше не поддерживаются. - person Raúl Juárez; 10.09.2013
comment
Я создал скрипт: jsfiddle.net/rf90210/LfBzy Совет работает, но он отображается справа от div, мне пришлось указать стиль display:inline для отображения qtip. Вы можете настроить позиционирование qTip, чтобы избежать добавления этих стилей. - person Raúl Juárez; 10.09.2013
comment
Ах! Это css делает это, спасибо. Теперь это работает. У меня вообще не было css. Я должен сказать, что «учебники» на qtip могли бы быть намного лучше. Поместите комментарий «display: inline» в свой ответ, и я буду рад принять его. Во всплывающей подсказке отсутствуют границы с вашим определением div в скрипке; отлично работает, когда определено как: #a_tip{ display:inline;} Спасибо! - person CHarris; 10.09.2013

arrow_upward
1
arrow_downward

Вы использовали неправильный селектор. Вам нужно использовать селектор #id.

$('#a_tip').qtip({ ... });

Во-вторых, чтобы убедиться, что #a_tip существует, когда вы это делаете, вам нужно сделать это в событии DOMReady.

$().ready(function() {
    $('#a_tip').qtip({ ... });
});
person techfoobar    schedule 10.09.2013
comment
Приветствия за это; два одинаковых комментария одновременно! Как и выше, все еще не работает. Я посмотрю на это немного больше, или если у вас есть какие-либо идеи... - person CHarris; 10.09.2013