Использование Qtip для кончика инструмента с выбивным отверстием

Мне нужно предоставить подсказку для определенного столбца в моей таблице. Мой вид:

<table class="tbl" id="dash" data-bind="with: Plan">
      <thead>
        <tr class="tag close">
          <th>Type</th>
          <th>Title</th>
        </tr>
      </thead>
      <tbody class="scrollContent" data-bind="foreach: Course">
        <tr>
          <td><i class="icon"></i></td>
          <td><a href="#" id="qtipselector_01" data-bind="text: Title"></a></td>
          <div id="TooltipContent_01" class="hidden">
            <a> Test Tool Tip</a>                 
          </div>
      </div>
    </tr> 
  </tbody>
 </table>

Я включил jquery и jquery.qtip.js.

Я написал функцию для отображения подсказки при вводе мыши.

 $('#qtipselector_01').qtip({
    content: $('div#TooltipContent_01').html(),
    position: {
        my: 'left center'
    },
    show: 'mouseenter',
        hide: {
            fixed: true,
            delay: 500,            
            when: {
                event: 'unfocus'
            }
        },
    style: {
        tip: {
          width: 20,
          height: 14,
        },
        width:280,
        height:100,    
        classes: 'qtipabc',        
    }
});

Главная страница

<script src="Scripts/jquery.js" type="text/javascript"></script>
<script src="Scripts/jquery.qtip.js"></script>
<!--Template binding--><!-- This is where my view is getting binded--> 
<div id="Container" ua-app-id="topVm" data-bind='template: {name: pageModel, data: pageVM }'>                  
</div>
<script src="Scripts/abc.js"></script> <!--Place where .qtip is called-->

Он не работает на данный момент.


person Aditya    schedule 25.01.2013    source источник
comment
Когда работает ваш код (для создания qtip)? Если он запускается до вас ko.applyBindings, то он не будет работать. Элементы DOM, которые вы пытаетесь связать, не будут существовать. Другая проблема заключается в том, что вы используете id внутри foreach. Это тоже не сработает. Если вы сделаете это, то каждый элемент будет иметь один и тот же id, что является нет-нет. Либо используйте класс, либо используйте привязку attr, чтобы дать им уникальный идентификатор.   -  person Matt Burland    schedule 26.01.2013
comment
Что касается вашего первого пункта: я включил сценарии в следующем порядке: ‹script src=Scripts/jquery.js type=text/javascript›‹/script›‹script src=Scripts/jquery.qtip.js›‹/script› ‹div databind ='template'› ‹script src=Scripts/Custom.js›‹/script› Custom.js имеет скрипт для привязки всплывающей подсказки.   -  person Aditya    schedule 26.01.2013
comment
Какой порядок? Покажите нам, где вы звоните .qtip() относительно того, где находится ваш звонок .applyBindings().   -  person Matt Burland    schedule 26.01.2013
comment
Отредактировал мой вопрос, чтобы включить это   -  person Aditya    schedule 26.01.2013
comment
Где ваш код ViewModel? Я даже не вижу, где вы загружаете Knockout.js.   -  person Matt Burland    schedule 26.01.2013
comment
Шаблон привязки данных в основном блоке привязывает модель основного представления и внутренне привязывает многие модели представлений. Это огромный кусок кода, поэтому я не включил его сюда. Я включил здесь одно из представлений, которое имеет qtip и дает проблему   -  person Aditya    schedule 26.01.2013
comment
Затем попробуйте разбить его на простой тестовый пример, возможно, в скрипке, и опубликуйте его.   -  person Matt Burland    schedule 26.01.2013
comment
Я создал новый пример скрипки здесь: jsfiddle.net/jearles/mBpJB/3   -  person Aditya    schedule 29.01.2013
comment
Адитья, к сожалению, вы не даете нам достаточно информации о вашем коде, чтобы помочь. Скрипка, на которую вы ссылались выше, - это та, которую я разветвил на другой ваш вопрос, и она работает. Можете ли вы теперь изменить эту скрипку, чтобы продемонстрировать свою ошибку? Если вы не можете, значит, в вашем реальном коде что-то не так. Порядок, в котором загружается JS, порядок, в котором оцениваются привязки и т. д. Если вы не можете инициализировать qtip, похоже, вы пытаетесь инициализировать его до включения библиотеки qtip.   -  person John Earles    schedule 29.01.2013
comment
У меня есть одностраничное приложение, в котором есть основная структура, которая заботится о привязке нокаута, и мы используем его в нашем проекте, где я определяю представления и модель представления. Это огромный кусок кода, поэтому я пытаюсь создать здесь сценарий. Я понимаю, что проблема в том, как вещи вызываются, но не могу понять, где.   -  person Aditya    schedule 29.01.2013
comment
Как показано в области вопросов (также так они загружаются в chrome), главная страница сначала загружает Jquery, а затем Jquery Qtip, и после этого вызывается abc.js, для которого определена пользовательская привязка, после этого все шаблоны связываются. Таким образом, пользовательская привязка загружается перед привязками ko.apply. Я пытался вызвать его внутри $('element').live('mouseover', function() и $('element').on('mouseover', function() по-прежнему не помогает   -  person Aditya    schedule 29.01.2013
comment
Одна вещь, которую вы, возможно, захотите попробовать, это поместить инициализацию qtip в файл setTimeout. Иногда при использовании пользовательских привязок для взаимодействия с элементом управления jQuery вам необходимо поместить инициализацию элемента управления jQuery в конец стека выполнения JavaScript. Это дает Knockout время для полной оценки наблюдаемых и отображения шаблона до того, как Qtip попытается выполнить привязку к элементу. В моем простом примере это не нужно, но вот как это будет выглядеть: jsfiddle.net/jearles/mBpJB /4   -  person John Earles    schedule 29.01.2013
comment
Спасибо, я нашел проблему. Это происходило, когда он загружался до Foundation.min.js. Я просто сохранил его после этого в библиотечной последовательности, и он начал работать. Пока не уверен, что в Foundation.min.js вызывало проблему.   -  person Aditya    schedule 30.01.2013
comment
В этом примере: jsfiddle.net/jearles/mBpJB/3 ....Можете ли вы покажите мне, как добавить всплывающую подсказку в каждую строку, если содержимое всплывающей подсказки поступает из отдельного html-файла. Также, как я буду передавать данные в свою подсказку. Я пытаюсь понять привязку шаблона здесь.   -  person Aditya    schedule 31.01.2013


Ответы (1)


$(document).ready(function(){
$('#qtipselector_01').qtip({
    content: $('div#TooltipContent_01').html(),
    position: {
        my: 'left center'
    },
    show: 'mouseenter',
        hide: {
            fixed: true,
            delay: 500,            
            when: {
                event: 'unfocus'
            }
        },
    style: {
        tip: {
          width: 20,
          height: 14
        },
        width:280,
        height:100,    
        classes: 'qtipabc'       
    }
});


});

Вы должны поместить свой код qTip в блок $(document).ready. Кроме того, у вас есть лишние запятые, которые могут мешать

person Mike    schedule 25.01.2013
comment
Когда я помещаю тот же код в document.ready, он выдает ошибку Uncaught SyntaxError: Unexpected end of input . Также это прекрасно работает при использовании вне шаблона, я имею в виду, когда я не использую привязку шаблона. Таким образом, эта проблема в основном связана с привязкой шаблона, и в противном случае скрипт работает нормально. - person Aditya; 26.01.2013