стилизация пузырьков qtip

#jquery #jquery-plugins #qtip

#jquery #jquery-плагины #qtip

Вопрос:

Я только что выбрал плагин qtip2 для jQuery и, похоже, не могу заставить стиль работать в соответствии с их примерами. Возможно, я чего-то не понимаю?

Это их пример загрузки 6 доступных тем по умолчанию, но это ничего не меняет, использую ли я кремовый, красный, темный, светлый, синий или зеленый. Я просто продолжаю получать тему cream по умолчанию. Они также должны были быть доступны и использоваться начиная с qtip 1x?

 $("jqueryselector").qtip({
   content: 'Dark themes are all the rage!',
   style: { 
      name: 'dark' // Inherit from preset style
   }
});
  

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

 $(function(){
    $('a['title']).qtip({style:{name:'red',tip:true}}); // picked up from the getting started page
});
  

Ответ №1:

Этот способ оформления всплывающей подсказки применяется к оригинальной версии qtip , которая теперь заменена более новой версией. qtip2 использует лучший метод стиля на основе классов.

 $('.selector').qtip({
   content: {
      text: 'I'm blue... deal with it!'
   },
   style: {
      classes: 'ui-tooltip-blue ui-tooltip-shadow'
   }
});
  

Вы определенно хотите использовать qtip2 . Он значительно улучшен по сравнению с qtip1 .

Комментарии:

1. ура. Они послали меня получить qtip2, поскольку в нем говорилось, что 1x скоро будет обесценен, но я никогда не видел ссылку на примеры qtip2 и документы. Спасибо.

2. да, к сожалению, в документации в настоящее время указано [ классы: ‘qtip-blue qtip-shadow’], но если вы посмотрите @ logic amp; styles, вам нужно будет следовать комментарию Джеффа и использовать ‘ui-tooltip-theStyleNameYouWant’

3. @beauXjames мне потребовалась ВЕЧНОСТЬ , чтобы разобраться… Я точно следовал их документации, но это не сработало! Вы знаете, где я могу найти список реально используемых классов стилей? Все, что я знаю сейчас, это синий и тень из этого ответа и ui-tooltip-dark

Ответ №2:

Похоже, вам не хватает некоторых скобок.

 $('a['title']).qtip(style:{name:'red',tip:true}); // your code
$('a[title]').qtip({ style: { name: 'cream', tip: true } });  // their code
  

РЕДАКТИРОВАТЬ: Я использовал qtip несколько месяцев назад и в итоге сделал это…

     style: {
        //name: 'cream',
        tip: true,
        background: '#E6EFF5',
        color: '#297AA8',
        border: {
            radius: 8,
            color: '#bfd8e8'
        }
    }
  

Комментарии:

1. нет, извините, я пропустил эти скобки при размещении его здесь, но они есть в моем скрипте. Извините.

2. Я не знаю, в чем дело. Я даже скопировал их код напрямую и скорректировал только $ («jqueryselector»), чтобы соответствовать моим целевым элементам, которые являются $ («a [title]»). По-прежнему ничего не делает, кроме квадратного пузырька в виде крема по умолчанию.

3. @robx Пожалуйста, посмотрите правку. Может быть, было бы лучше просто определить свои собственные стили, как в моем примере.

4. это тоже никуда не годится. что бы я ни делал, если я в конечном итоге не нарушу это, то все, что я получу, это стиль cream. Я подумал, что это может быть кэш, поэтому удалил это и даже попробовал в разных браузерах. Только кремовый стиль.