Использовать один qtip для нескольких мест, но с различным содержанием? - PullRequest
Новая
       5

Использовать один qtip для нескольких мест, но с различным содержанием?

1 голос
/ 10 февраля 2011

Привет,

Я использую qTip на своем сайте, и вот как выглядит функция готовности документа: 

    $.fn.qtip.styles.mystyle = { // Last part is the name of the style
       width: 200,
       background: '#ebf1ff',
       color: 'black',
       textAlign: 'center',
       border: {
          width: 1,
          radius: 4,
          color: '#AACCEE'
       },
       tip: 'bottomLeft',
       name: 'dark'
    }



   $('.controlTitleContainer .icon').qtip({
       content: $(this).find('.tooltip').html(),
        position: {
              corner: {
                 target: 'topRight',
                 tooltip: 'bottomLeft'
              }
           },
       style: 'mystyle'
    });

Первая часть предназначена только для стилей, вторая же часть заполняет qtip.

Мой HTML выглядит следующим образом: 

 <div class="controlTitleContainer">
      <div class="text">
           <label for="ModelViewAd_Title">Titel</label>
      </div>
      <div class="icon">
           &nbsp;<div class="toolTip">MyToolTipTest</div>
      </div>
  </div>

note: класс toolTipустановлен на Display: none, и div = icon = icon icon будет отображать всплывающую подсказку

У меня будет много HTML-фрагментов, подобных этой, на странице, но они будут содержать разные данные, что мне нужно, это всплывающая подсказка, чтобы показать текущий внутренний HTML.Возможно ли это, или мне нужно сгенерировать объявление qtip для каждого фрагмента HTML, подобного этому?

Совет Pleas

BestRegards

1 Ответ

3 голосов
/ 10 февраля 2011

Почему бы не сделать это так? 

$(document).ready(function(){
    $.each($(".tooltip"), function(i,val){
        $.fn.qtip.styles.mystyle = { 
           width: 50,
           background: '#ebf1ff',
           color: 'black',
           textAlign: 'center',
           border: {
              width: 1,
              radius: 4,
              color: '#AACCEE'
           },
           tip: 'bottomLeft',
           name: 'dark'
        }

        var theContent = $(val).html();
        $(val).qtip({
            content: theContent,
             position: {
                      corner: {
                         target: 'topRight',
                         tooltip: 'bottomLeft'
                      }
                   },
               style: 'mystyle'
        });
    });
});

Таким образом, для любого div с class="tooltip" автоматически включится qTip.Это на самом деле то, что я сделал в своем проекте.

Вот мой тестовый HTML: - 

 <div class="controlTitleContainer">
      <div class="text">
           <label for="ModelViewAd_Title">Titel</label>
      </div>
      <div class="icon">
           &nbsp;<span class="tooltip">MyToolTipTest</span>
           &nbsp;<span class="tooltip">MyToolTipTest2</span>
           &nbsp;<span class="tooltip">MyToolTipTest3</span>
      </div>
  </div>
...