Динамический цвет фона для qTip2

Question

Кто-нибудь знает, можно ли контролировать цвет фона qTip2 в скрипте? Я могу установить сообщение динамически, но у меня проблемы с изменением цвета фона. У меня есть серия различных цветных DIV, и мне нужен подсказка для изменения цвета в зависимости от цвета фона DIV. С моим javascript я могу получить цвет фона DIV, но я просто не могу установить цвет фона в qTip2.

jQuery(document).ready(function($){ 
    $(".tooltip").each(function(){ 
     $toolTip = $(this).data('title'); 
     var bgColor = $(this).css('backgroundColor'); 
     hexc(bgColor); 
     function hexc(colorval) { 
      var parts = colorval.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); 
      delete(parts[0]); 
      for (var i = 1; i <= 3; ++i) { 
       parts[i] = parseInt(parts[i]).toString(16); 
       if (parts[i].length == 1) parts[i] = '0' + parts[i]; 
      } 
      color = '#' + parts.join(''); 
      $bgColor = color; 
     } 

     $('.tool-tip').css('backgroundColor', $bgColor) 

     $(this).qtip({ 
      content: { 
       text: $toolTip 
      }, 
      position: { 
       my: 'bottom right', 
       at: 'top right', 
       target: 'mouse' 
      }, 
      style: { 
       classes: 'tool-tip', 
       tip: { 
        height: 15 
       } 
      } 
     }) 
    }); 
}); 

Answer 1

См. QTip2 dynamic show/hide events and slideDown, как динамически менять классы стилей. Затем вы можете настроить классы в соответствии с вашими div.

Да, я знаю, что этот вопрос был задан давно, но, надеюсь, это помогает кому-то другому.

Ссылка содержит следующую информацию:

Есть по крайней мере три способа установки на QTIP параметров динамически.

Установка переменных за пределами QTIP свойств и использовать эти Используйте функцию обратного вызова, если таковой имеются использовать событие функционировать Я уверен, что есть и другие способы, чтобы выполнить эту задачу, но ниже код работает для всех ситуаций, мне нужно , и демонстрирует все три метода. Мне нужно было использовать как минимум два, так как метод fadeIn не позволял мне просто использовать переменную. Я также не мог просто вызвать метод fadeIn, только если intFade не был определен.

Итак, надеюсь, этот ответ поможет кому-то другому.

function setupQtips() 
{ 
    $("*[qtipiddiv]").each 
    (
     function() 
     { 
      //Title 
      var elmTarget = $(this); 
      var strTitle = elmTarget.attr('qtiptitle'); 
      if (strTitle == undefined) 
      { 
       strTitle = false; 
      } 

      //Title Button 
      var binTitleButton = elmTarget.attr('qtipbutton'); 
      if (binTitleButton == undefined) 
      { 
       binTitleButton = false; 
      } 

      //Show 
      var strShow = elmTarget.attr('qtipshow'); 
      if (strShow == undefined) 
      { 
       strShow = 'click'; 
      } 

      if (strShow == 'false') 
      { 
       strShow = false; 
      } 

      //Hide 
      var strHide = elmTarget.attr('qtiphide'); 
      if (strHide == undefined) 
      { 
       strHide = 'unfocus'; 
      } 

      if (strHide == 'false') 
      { 
       strHide = false; 
      } 

      //Modal 
      var binModal = elmTarget.attr('qtipmodal'); 
      var binBlur = false; 
      if (binModal == undefined) 
      { 
       binModal = false; 
      } 
      else if (strHide == 'unfocus') 
      { 
       binBlur = true; 
      } 

      //Tip Height/width 
      var intTipWidth = elmTarget.attr('qtiptipwidth'); 
      if (intTipWidth == undefined) 
      { 
       intTipWidth = 6; 
      } 

      var intTipHeight = elmTarget.attr('qtiptipheight'); 
      if (intTipHeight == undefined) 
      { 
       intTipHeight = 6; 
      } 

      //Style 
      var strStyle = elmTarget.attr('qtipstyle'); 
      if (strStyle == undefined) 
      { 
       strStyle = ''; 
      } 

      //____________________________________________________ 
      //Set qtip 
      $(this).qtip 
      (
       { 
        overwrite: false, 
        content: 
        { 
         text: function (event, api) 
         { 
          var strId = $(this).attr('qtipiddiv'); 
          return ($('#' + strId)); 
         }, 

         title: 
         { 
          text: strTitle, 

          button: binTitleButton 
         } 
        }, 

        show: 
        { 
         event: strShow, 

         effect: function (offset) 
         { 
          var strFade = offset.target.attr('qtipfade'); 
          if (strFade == undefined) 
          { 
           $(this).fadeIn(0); 
          } 
          else 
          { 
           var intFade = parseInt(strFade); 
           $(this).fadeIn(intFade); 
          } 
         }, 

         solo: true, 
         modal: 
         { 
          on: binModal, 
          blur: binBlur 
         } 
        }, 

        hide: 
        { 
         event: strHide 
        }, 

        position: 
        { 
         viewport: $(window), 

         adjust: 
         { 
          screen: true 
         } 
        }, 

        style: 
        { 
         classes: 'qtip-rounded qtip-shadow ' + strStyle, 
         tip: 
         { 
          width: intTipWidth, 
          height: intTipHeight 
         } 
        }, 

        events: 
        { 
         show: function (event, api) 
         { 
          //Position 
          var elmTarget = $(api.elements.target[0]); 
          var strPositionMy = elmTarget.attr('qtippositionmy'); 
          if (strPositionMy != undefined) 
          { 
           elmTarget.qtip('option', 'position.my', strPositionMy); 
          } 

          var strPositionAt = elmTarget.attr('qtippositionat'); 
          if (strPositionAt != undefined) 
          { 
           elmTarget.qtip('option', 'position.at', strPositionAt); 
          } 

          //Height/width 
          var strWidth = elmTarget.attr('qtipwidth'); 
          if (strWidth != undefined) 
          { 
           elmTarget.qtip('option', 'style.width', strWidth); 
          } 

          var strHeight = elmTarget.attr('qtipheight'); 
          if (strHeight != undefined) 
          { 
           elmTarget.qtip('option', 'style.height', strHeight); 
          } 
         } 
        } 
       } 
     ) 
     } 
); 

    return; 

}